Question

可能很简单，但特别是对于我的版本，我找不到任何解决方案。

这个简单的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>

Answer 1

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

＆＃13;

<div id="header">
    <img id="imageInHeader" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png" 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>

＆＃13;

Answer 2

检查出来以防你无法在你的HTML中进行更改

＆＃13;

$('#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")
  }
  
});

＆＃13;

<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>

＆＃13;

希望这能解决你的问题感谢

Answer 3

<build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.7.0</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                </configuration>
            </plugin>
        </plugins>
</build>

On＆＃39; image＆＃39;单击，隐藏上面的div并显示下面的div，反之亦然...这样就不会出现任何时候标题折叠的情况。

可折叠的div - 删除图片继续前进

3 个答案: