Question

我的手风琴出了问题：我想在面板打开时jQuery向我点击的目标（元素）添加一个类expanded，当另一个面板打开时，它会删除该类和将其添加到打开的另一个打开手风琴面板时默认的引导功能会删除collapsed标签的a类，当我关闭它时，它会再次添加它（collapsed类），我用它来解决我的问题（我在上面的段落中解释过），但我不能这是HTML代码。

<div class="panel-group" id="accordion">
     <div class="panel" >
          <div class="panel-heading">
               <a data-toggle="collapse" data-parent="#accordion" href="#html">HTML</a>
           </div>
            <ul id="html" class="panel-collapse collapse">
                 <li><a class="a_nav" href="#">Tags</a></li>
             </ul>
       </div>

       <div class="panel">
           <div class="panel-heading">
               <a data-toggle="collapse" data-parent="#accordion" href="#css">CSS</a>
           </div>
           <ul id="css" class="panel-collapse collapse">
               <li><a class="a_nav" href="#">Bootstrap</a></li>
           </ul>
       </div>
 </div>

这是jQuery代码

$(document).ready(function(){
      //add class to panel heading of sidebar for expanding
      $("div.panel-heading").click(function (event) {
              $target = $(event.target);
              $target.addClass("expanded");
              if($("div.panel-heading a").hasClass("collapsed")) {
                    $(this).removeClass("expanded");
                     //this line is for testing if the if condition even works
               $(this).text("ok");
            }
        });
});

Answer 1

我认为这可以解决您的问题：

$('.panel-heading').click(function (event) {
  $(this).toggleClass('expanded');
  $('.panel-heading a').toggleClass('collapsed');
});

请参阅docs for toggleClass()。

Answer 2

您正在尝试获取事件目标，并且每次都将该类应用或移除到事件目标。

正如一些用户在我之前所说，也许你应该让bootstrap处理手风琴的功能。

但我会尽快回答你的问题。

您正在使用：

$("div.panel-heading").click(function (event) { ... });

所以你想在点击带有class panel-heading的div时执行一个函数。

在你执行的功能中：

$target = $(event.target);

获取触发click事件的目标元素。

现在查看你的HTML我可以看到.panel-heading div包含一个孩子的链接。

所以event.target将是链接本身，如果你单击链接或.panel-heading div，如果你点击div，所以根据你碰巧点击的位置，该类将被添加到/从不同元素中删除。

这是值得关注的。也许代替event.target，您可以在事件处理函数中使用$（this）。

在下面，你的逻辑是错误的，因为我们假设你将addClass（＆＃34; expand＆＃34;）添加到正确的元素，然后这个：

$("div.panel-heading a").hasClass("collapsed");

将查看元素集合，即使第一个链接没有该类，第二个链接也可以拥有它，在这种情况下，if语句将评估为true，而您之前添加的类将是从调用事件处理程序的元素中删除。

要解决这个问题，我会提出类似的建议（如果你不想让bootstrap做这项工作）：

$(".panel-heading").click(function () {

    var $target = $(this);

   //close all panels
    $(".panel-heading").removeClass("expanded");
    $(".panel-heading a").addClass("collapsed");

    //open clicked one
    $target.addClass("expanded");
    $("a", $target).removeClass("collapsed");

});

为了获得更好的性能，我会将事件处理程序中使用的元素集合缓存在变量中，这样每次点击都不会重新计算。

无法将类切换为元素

2 个答案: