使用jQuery重置链接的背景颜色

Question

使用jQuery，我当前正在单击链接时更改其链接的背景颜色。 但是，我想在a）关闭链接或b）单击另一个链接（例如Dropdown 2 ）后重置此颜色。

有人可以协助吗？ 我会使用toggle吗？

https://jsfiddle.net/ot3g0aw0/

  $(document).ready(function($) { $('.inline').find('.navtoggle').click(function(){ //Expand or collapse this panel $(this).css('background-color','red').next().slideToggle('fast'); //Hide the other panels $(".sub-menu").not($(this).next()).slideUp('fast'); }); }); 

  .accordion-toggle {cursor: pointer;} .sub-menu {display: none;} .sub-menu .sub-menu {display: block;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <nav class="medium-8 columns primary menu"> <ul class="inline naked"> <li class="primary-item"><a href="http://localhost:8888/test/wordpress">Home</a></li> <li id="menu-item-74" class="primary-item menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-74"><a href="#" class="navtoggle">Dropdown 1</a> <ul class="sub-menu"> <li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-76"><a href="http://localhost:8888/test/wordpress/?page_id=45">Dropdown </a> <ul class="sub-menu"> <li id="menu-item-77" class="sub-sub-menu menu-item menu-item-type-post_type menu-item-object-page menu-item-77"><a href="http://localhost:8888/test/wordpress/?page_id=47">Test 1</a></li> <li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78"><a href="http://localhost:8888/test/wordpress/?page_id=49">Test 2</a></li> </ul> </li> </ul> <li id="menu-item-79" class="primary-item menu-item menu-item-type-post_type menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-79"><a href="#" class="navtoggle">Dropdown 2</a></li> </li> </ul> </nav> 

Answer 1

使用一个类来设置背景会更容易，那么您可以使用toggleClass（）来切换该类以切换所选状态

.selected {background-color: red;}

然后

  $(document).ready(function($) {
    var $toggles = $('.inline').find('.navtoggle').click(function(){
        $toggles.not(this).removeClass('selected')

      //Expand or collapse this panel
        $(this).toggleClass('selected').next().slideToggle('fast');

      //Hide the other panels
      $(".sub-menu").not($(this).next()).slideUp('fast');

    });
  });

演示： 小提琴