无法将类切换为元素

Question

I got problem with my accordion: I want when the panel opens jQuery adds a class expanded to the target(element) which I clicked and when the other panel opens, it removes that class and add it to the other one which opens.
The default bootstrap functionality when I open the accordion panel it removes collapsed class of the a tag and when I close it, it adds it( collapsed class) again, I used this to solve my problem(which I explained it in paragraph above) but I couldn't.
here is the HTML code.

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

and here is the jQuery code

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

I think this should solve your issue:

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

See the docs for toggleClass() .

Answer 2

You are trying to get the event target and apply or remove the class to the event target every time.

As some users have said before me, maybe you should let bootstrap handle the accordion functionality.

But I will give a quick try to answer your problem.

You are using:

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

so you want to execute a function when an div with class panel-heading is clicked.

Inside the function you do:

$target = $(event.target);

To get the target element where the click event was fired.

Now looking at your HTML I can see that .panel-heading divs contain a link as a child.

So event.target, will be the link itself if you click on the link or the .panel-heading div if you click on the div, so depending on where you happen to click, the class is going to be added to/removed from different elements.

This is something to watch. Maybe instead of event.target, you can use $(this) in your event handling function.

Below that, your logic is wrong because let's assume that you addClass("expanded") to the correct element, then this:

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

Will look at a collection of elements so even if the first link doesn't have the class, the second link may have it, in which case the if statement will evaluate to true and the class you added before, will be removed from the element on which the event handler is called on.

To fix the issue, I would propose something like (if you don't want to let bootstrap do the work):

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

});

For better performance, I would cache the collections of elements used in the event handler in variables so that they don't get recalculated every time a click happens.