Collapsable div - 删除图片继续前进

可能是简单的事情，但它似乎特别是我的版本，我没有找到任何解决方案。Collapsable div - 删除图片继续前进

这个简单的div显示一个大图片，标题和长文本。我希望如果你点击图片，它会拼接/删除网站上的所有内容，因此会有更多的空间。但是 - 标题应该仍然保留（可能以更小的格式）。

我试图让它与javascript折叠，但我不能真正让它工作，标题停留在那里，即使其余的被删除。由于标题需要保留，因此如果需要再次点击标题，您可以将其重新标记。

我想用CSS/Javascript做到这一点，没有Angular.JS或类似，你们有没有解决方案？

<div id="header"> 
    <img src="img/logo.png"></img><br> 
    <h3>HEADING</h3><br> 
    <blockquote class="form-text text-muted">Long Text in here</blockquote> 
</div>

来源

2017-04-21 Marcel Leonhard

你能在HTML改变？ –

你已经试过了什么？正如你所说'我试图让它与javascript'折叠，任何代码？这样你可以从解决方案中更好地学习。 –

让我看看你在JavaScript中尝试过什么。我会帮你:)'我试图让它与javascript'崩溃， –

您必须将点击事件放到您要单击的元素上，单击后才能执行该功能。我已将id属性添加到图片标头，以便能够使用javascript获取它。

<div id="header"> 
 
    <img id="imageInHeader" src="https://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]" onclick="hideMe()"></img><br> 
 
    <h3 onclick="showMe()">HEADING</h3><br> 
 
    <blockquote class="form-text text-muted">Long Text in here</blockquote> 
 
</div> 
 

 
<script> 
 
function hideMe() { 
 
    document.getElementById('imageInHeader').style.display = 'none'; // removes the element from the layout 
 
    // document.getElementById('imageInHeader').style.visibility = 'hidden' // hides the element, doesn't affect layout 
 
} 
 

 
function showMe() { 
 
    document.getElementById('imageInHeader').style.display = 'block'; 
 
    // document.getElementById('imageInHeader').style.visibility = 'visible' 
 
} 
 
    
 
</script>

来源

2017-04-21 11:01:07 boroboris

我不知道为什么downvote自这个例子工作。 – boroboris

这是完美的！像魅力一样工作，谢谢！唯一奇怪的是，当使用HEADING的显示功能时，它确实在标题和上面的标志之间创造了更多的空间。也在这个片段中，不是吗？ –

我不这么认为。我检查了铬开发工具，它看起来是一样的。您正在使用哪种浏览器？ – boroboris

-1

<div id="header" id="collapseThisDiv"> 
    <img src="img/logo.png"></img><br> 
    <h3>HEADING</h3> 
    <blockquote class="form-text text-muted">Long Text in here</blockquote> 
</div> 
<div id="header" id="expandThisDiv"> 
    <img src="img/logo.png"></img><br> 
    <h3>HEADING</h3> 
</div>

在“图像”点击，隐藏上述股利和显示较低的DIV，反之亦然。这也不会出现在该标题的方法是坍塌的任何时间。

来源

2017-04-21 11:04:31 Bharat

检查了这一点
的情况下，你都不能进入您的HTML

$('#image').click(function() { 
 
    $("#header #image").css("display", "none"); 
 
    $("#header .text-muted").css("display", "none"); 
 
    
 
}); 
 
$('#header h3').click(function() { 
 
    if($("#header #image").css("display") == "none"){ 
 
    $("#header #image").css("display", "block") 
 
    } 
 
    if($("#header .text-muted").css("display") == "none"){ 
 
    $("#header .text-muted").css("display", "block") 
 
    } 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<div id="header"> 
 
    <img id="image" src="https://www.google.com.pk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png"></img><br> 
 
    <h3>HEADING</h3><br> 
 
    <blockquote class="form-text text-muted">Long Text in here</blockquote> 
 
</div>

希望这个解决您的问题
感谢

来源

2017-04-21 11:08:24

Collapsable div - 删除图片继续前进

回答

相关问题