jquery 展开/折叠无法正常工作答案

【问题标题】：jquery expand/collapse not working rightjquery 展开/折叠无法正常工作
【发布时间】：2018-05-02 06:05:42
【问题描述】：

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

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

问题在于“主”按钮用作“全部显示”或“全部隐藏”。它不像我想要的那样工作。因此，当我单击它一次时，会显示所有项目，当我再次单击它时，所有项目都会被隐藏。

问题是，当我单击打开的项目之一，然后单击“全部显示”按钮时，该已打开的元素将被隐藏，而在隐藏之前的元素现在正在显示。如何从这里开始？

我的代码在这里：

<!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>

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

我知道这里的一切都一团糟，我不是以英语为母语的人，但我希望你能理解我正在努力解决的问题。

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

【问题讨论】：

在 jquery 中折叠和展开的方法没有定义。

标签： javascript jquery toggle collapse expand

【解决方案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');
         }
    });
});

但我建议使用自定义类或 id 来识别按钮或其他元素，因为页面可以包含许多具有类似引导程序类的元素。对于按钮中的工具文本，您需要使用变量。

【讨论】：

感谢您的回复。我测试了你的代码，它的工作方式有点不同，但不是想要的方式。切换按钮功能正常，如果按下按钮，所有元素都会显示和隐藏。但是，即使打开了一个元素，它的作用也与我的代码完全相同。还有什么建议吗？
对此有什么解决方案吗？关于这个问题，我已经浏览了很多互联网，但没有找到适合我的合适解决方案。所以，我希望它就像我打开一个折叠项目然后单击“全部显示”一样，第一个打开的项目应该保持打开状态，而不是像现在这样关闭。