ShowHide (shID) 一次只显示一个 div？答案

【问题标题】：ShowHide (shID) to show only one div at a time?ShowHide (shID) 一次只显示一个 div？
【发布时间】：2017-03-15 21:49:22
【问题描述】：

我目前正在开发一个 Bootstrap 网站。我是 jquery 和 Java 的新手，所以我不知道该怎么做。

我有这样的事情：http://jsfiddle.net/PVLMX/2/

function showHide(shID) {
    if (document.getElementById(shID)) {
        if (document.getElementById(shID + '-show').style.display != 'none') {
            document.getElementById(shID + '-show').style.display = 'none';
            document.getElementById(shID).style.display = 'block';
        } else {
            document.getElementById(shID + '-show').style.display = 'inline';
            document.getElementById(shID).style.display = 'none';
        }
    }
}

我在显示图片库的菜单上使用 ShowHide 功能。我希望能够一次显示一个 div。在示例中，当您按下第二个查看更多按钮时隐藏第一个内容（查看更多），而无需单击“隐藏此内容”。我想消除“隐藏此内容”按钮。

这有意义吗？对不起，如果我不清楚，感谢您的帮助！

【问题讨论】：

标签： javascript jquery html css show-hide

【解决方案1】：

稍微修改一下你的 HTML 并添加 JQuery，你可以这样实现：

HTML

<div id="wrap">
  <p>This text is visible, but there is more.
    <a href="#" id="example-show" class="showLink">
      <br/>
      <br/>See more >></a>
  </p>
  <div id="example" class="more">
    <p>This text was hidden, now you see it</p>

  </div>
</div>
<div id="wrap">
  <p>This text is visible, but there is more.
    <a href="#" id="example2-show" class="showLink">
      <br/>
      <br/>See more >></a>
  </p>
  <div id="example2" class="more">
    <p>This text was hidden, now you see it</p>  
  </div>
</div>

JQUERY

$('.showLink').click( function() {

    $('.showLink').parent().next().hide();
    $(this).parent().next().show();

})

记得在你的 html 头部添加 JQuery

这是一个 Jsfiddle：http://jsfiddle.net/PVLMX/13/

如果您想了解更多关于 Jquery parent() 和 next() 的信息：

https://api.jquery.com/parent/

https://api.jquery.com/next/

【讨论】：