Question

使用jQuery，我正在点击链接时更改链接的背景颜色。但是，我想重置此颜色一次a）我关闭链接或b）我点击另一个链接（说Dropdown 2）。

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

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

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

1 个答案: