Javascript：只针对父项，而不考虑兄弟项

我是Javascript新手，我一直绞尽脑汁想弄清楚我猜应该很简单的是什么：

我正在使用Twitter引导，有一个折叠面板的手风琴。我在“panel_button”类的面板标题中添加了两个额外的div：一个包含文本“Open”，另一个包含文本“Close”。我显然想切换单击时显示的内容，但我不知道如何仅针对父面板，而不同时触发同级面板。这是我的密码：

=====

HTML:

====

我意识到这是行不通的，但就我所知：

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

---

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

我不是100%像你想做的那样。我的最佳猜测是在单击时打开每个标题下的面板

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

href="#collapseTwo"

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

希望这能帮助你

---

Pete

您可以使用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();
})

在这里，我根据您的代码设置了一个

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

---

谢谢，皮特。也许我没有很好地描述这个问题。折叠式手风琴工作正常，它只是得到“.close\u link\u content”即显示文本“close”或“.open\u link\u content”即显示文本“open”…在单击该面板时被激活，而Javascript不会触发所有面板的类。嗨，现在刚刚看到了这一点，但很高兴你得到了你需要的答案哈-好，在匆忙中，我认为这正是我所需要的。它可以工作，但两个面板都显示“Close”div，即使只有一个面板处于打开状态。理想情况下，我只需要激活面板即可触发显示/隐藏事件。然后，您只需在可折叠面板内搜索，如下所示：$this.find.close\u link\u content.hide；对它工作得很漂亮，而且代码比我想出的笨重的野兽少得多。非常感谢^_^

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