Question

目前，当我点击链接时，它会将背景颜色设置为红色。并保持红色。如何仅为active链接将其设置为红色？所以我没有多个红色背景链接。

演示： https://jsfiddle.net/4dm318nn/16/

  $(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 2</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>
        
        						
		<li id="menu-item-89" 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 2</a>
			<ul class="sub-menu">
				<li id="menu-item-90" 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 2</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>
        
	</ul>
</nav>

Answer 1

之前添加一行：

$('.navtoggle').css('background','none'); // make none before adding bgcolor
$(this).css('background-color','red').next().slideToggle('fast');

Fiddle

Answer 2

将所有链接元素设为一个公共类，然后设置该类中所有元素的背景颜色将单击的链接设置为红色。

$('.commonClass').css('background-color', 'none');
$(this).css('background-color', 'red').next().slideToggle('fast');

Answer 3

$(document).ready(function($) {
  $('.inline').find('.navtoggle').click(function(){
    $(".navtoggle").each(function () {
        $(this).css('background-color','')
    });
  //Expand or collapse this panel
    $(this).css('background-color','red').next().slideToggle('fast');

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

  });
});

Answer 4

您可以通过在活动元素上添加类来完成此操作。

  $(document).ready(function($) {
    $('.inline').find('.navtoggle').click(function(){
        $('.navtoggle').removeClass('active');
        $(this).addClass('active');
      //Expand or collapse this panel
        $(this).next().slideToggle('fast');

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

    });
  });

示例： https://jsfiddle.net/skeurentjes/4dm318nn/18/

单击背景颜色 - jQuery

4 个答案:

Fiddle