Question

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

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

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

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

我的代码在这里：

<!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');
         }
    });
});

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

jquery扩展/崩溃无法正常工作

1 个答案: