jquery expand/collapse 工作不正常

Question

我刚刚加入论坛，当时我真的很沮丧。我一直在努力解决我发现但无法自己解决的问题。

所以我正在构建 expand/collapse 风格的菜单，其中有两个项目（两个标题）。当我单击其中一个标题时，项目及其内容被展开。当我再次单击它时，它会折叠起来。这正是我希望它工作的方式。

问题是 'master' 按钮用作 "Show all" 或 "Hide all"。它没有像我希望的那样工作。因此，当我单击一次时，所有项目都会显示，而当我再次单击它时，所有项目都将被隐藏。

问题是当我单击其中一个项目打开然后单击 "Show all" 按钮时，已经打开的元素被隐藏，而隐藏之前的元素现在被显示。如何从这里开始？

我的代码在这里：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <title>Test</title>

    <!-- BOOTSTRAP CORE STYLE  -->
    <link href="assets/css/bootstrap.css" rel="stylesheet" />
    
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 
</head>

<body>

<button type="button" class="btn btn-primary">Show all</button>

<br>


<script>
$(document).ready(function(){
    $(".btn-primary").click(function(){
        $(".panel-collapse").collapse('toggle');
  
  var $this = $(this);
  $this.toggleClass('.btn-primary');
  if($this.hasClass('.btn-primary')){
   $this.text('Hide all');
  } else {
   $this.text('Show all');
   }
    });
});
</script>

<br>

 
<div class="container">
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" href="#collapse1">First collapse</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">First content</div>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" href="#collapse2">Second collapse</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Second content</div>
      </div>
    </div>
  </div>
</div>


<!--CORE SCRIPTS PLUGIN-->
<script src="assets/js/jquery-1.11.1.min.js"></script>
<!--BOOTSTRAP SCRIPTS PLUGIN-->
<script src="assets/js/bootstrap.js"></script>
 
 
</body>
</html>

请注意：很少有脚本具有本地路径，因为我无法让全局链接（超链接）在这里工作...真的不知道为什么。

我知道这里的一切都一团糟，我的母语不是英语，但我希望你能理解我的困难。

提前致谢。任何帮助表示赞赏！ :)

Answer 1

尝试下一个代码：

$(document).ready(function(){
  let $button =$(".btn-primary");
   $button.click(function(){
        $(".panel-collapse").toggle()

        var $this = $(this);
        $this.toggleClass('.btn-primary');
        if(!$this.hasClass('.btn-primary')){
         $this.text('Hide all');
        } else {
         $this.text('Show all');
         }
    });
});

但我建议使用自定义 class 或 id 来识别按钮或其他元素，因为页面可以有许多具有类似引导程序的元素 classes.For 在按钮中切换文本你需要使用变量。

jquery expand/collapse 工作不正常

jquery expand/collapse not working right

javascript

jquery

expand

toggle

collapse