Question

我目前正在开发一个Bootstrap网站。我是jquery和Java的新手，所以我无法想象如何做到这一点。

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。在该示例中，当您按下第二个看到更多按钮时，隐藏第一个内容（看到更多），而不必单击“隐藏此内容”。我想消除“隐藏此内容”按钮。

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

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

ShowHide（shID）一次只显示一个div？

1 个答案: