Question

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

我正在使用Twitter引导程序并拥有可折叠面板的手风琴。我在类'panel_button'中的面板标题中添加了两个额外的div：一个包含文本'Open'，另一个包含'Close'。我希望显然在点击时显示切换，但我不知道如何仅在不触发兄弟姐妹的情况下定位父面板。这是我的代码：

=====

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

我不是100％你要做的事情。我最好的猜测是点击每个标题下面的面板？

在这种情况下，只需将第二个链接中的href更新为：

href="#collapseTwo"

如果确实需要访问元素的父元素 $("element").parent()

希望这有助于你，

皮特

Answer 2

您可以使用bootstrap的show / hide事件并根据它们显示打开或关闭链接：

$('.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

Answer 3

类似这样的事情

$(".panel-title , .panel_button").click(function () {

            if ($(this).hasClass("panel-title")) {
                var href = $(this).children("a").attr("href")  
            } else {
                var href = $(this).attr("href")
            }

            $(href).toggle()
            if ($(href + ":visible").length) {
                $(href).prev().find(".open_link_content").show()
                $(href).prev().find(".close_link_content").hide()
            } else {
                $(href).prev().find(".open_link_content").hide()
                $(href).prev().find(".close_link_content").show()
            }

        });

但要注意：html中的第二个元素可能是

<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" class="panel_button">

Javascript：仅定位父项并单独留下兄弟姐妹

3 个答案: