Javascript:仅针对父元素并单独留下 sibling

Question

我是 Javascript 的新手，我一直在绞尽脑汁试图找出我认为应该非常简单的东西:

我正在使用 Twitter bootstrap 并有一个可折叠面板的 Accordion 。我在“panel_button”类中的面板标题中添加了两个额外的 div:一个包含文本“打开”，另一个包含“关闭”。我显然想切换单击时显示的内容，但我不知道如何在不触发 sibling 的情况下仅定位父面板。这是我的代码:

=====

HTML:

<div class="panel panel-default">
  <div class="panel-heading clearfix closed" role="tab" id="headingOne">
  <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">Panel Heading 1</a></h4>
  <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne" class="panel_button">
    <div class="open_link_content">Open</div>
    <div class="close_link_content" style="display:none;">Close</div>
  </a>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
  <div class="panel-body">Panel Content 1</div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading clearfix closed" role="tab" id="headingTwo">
<h4 class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Panel Heading 2</a></h4>
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseOne" class="panel_button">
  <div class="open_link_content">Open</div>
  <div class="close_link_content" style="display:none;">Close</span></div>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">Panel Content 2</div>
</div>
</div>

====

我知道这行不通，但据我所知:

<script>
  $(".panel-title , .panel_button").click(function(){
      $(".close_link_content").toggle();
      $(".open_link_content").toggle();
  });
</script>

希望有一个简单的解决方案。感谢阅读!

Answer 1

您可以使用 Bootstrap 的显示/隐藏事件并根据它们显示打开或关闭的链接:

$('.panel').on('hide.bs.collapse', function (e) {
    $(this).find(".close_link_content").hide();
    $(this).find(".open_link_content").show();
})

$('.panel').on('show.bs.collapse', function (e) {
    $(this).find(".close_link_content").show();
    $(this).find(".open_link_content").hide();
})

我在这里设置了一个 example从你的代码