javascript - 使用 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');

    });
  });

演示:Fiddle