如何为展开的菜单添加类并在折叠后删除类

Question

I have tried to make dynamic menu list, and I have main menu and submenu, each item has submenu provided (+ ) sign before item name. I have used addClass to add( - ) when I double click on the menu item and it works, however when I double click again on the item will collapse but ( - ) sign will not change to ( + ). My question, how to remove ( - ) sign when the menu collapse by using removeClass and change it to ( +) which is the official ?

Thanks a lot.

CSS:

.openSign{
  background: url('images/open.png')no-repeat 0px  0px;
}
.closeSign{
  background: url('images/close.png')no-repeat 0px  0px;
}

HTML:

<ul > 1
  <li class="navL1 openSign"> 1.1 
    <ul class="navL2 openSign"> 
      <li class="navL2 openSign"> 1.1.1
        <ul>
          <li class="navL3"><a>1.1.1.1 </a> </li>
          <li class="navL3">1.1.1.2 </li>
          <li class="navL3">1.1.1.3</li>
        </ul>

JavaScript:

<script type="text/javascript">
       $(document).ready(function() {
                $(".navL2, .navL3").hide();
                $(".navL1").dblclick(function(e){
                    $(this).find('.navL2').slideToggle();
                    $(this).addClass("closeSign");   
              });
        });
</script>

Answer 1

有一个toggleClass就像有一个slideToggle 。

Answer 2

If you use slideToggle , you should use toggleClass() as well (instead of addClass ):

$(this).toggleClass("closeSign")
  .find('.navL2').slideToggle();