使用jQuery单击链接时更改链接背景颜色

Question

我有一个基本的jQuery手风琴。 如果要单击链接，我想更改链接的背景颜色。

因此，如果单击“下拉列表1”，则背景色将变为红色。 我该怎么做呢？

演示： http ： //jsfiddle.net/4dm318nn/

  $(document).ready(function($) { $('.inline').find('.navtoggle').click(function(){ //Expand or collapse this panel $(this).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> </ul> </nav> 

Answer 1

单击时添加红色

的CSS

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

的HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/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>
    </ul>
</nav>

Java脚本

$(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');

});
});

Answer 2

不确定这是您想要的，但是

$(".inline.naked li").click(function(color){
   var bgColor = typeof x === "undefined" ? "red" : color;
   $(this).css("background-color", color);
});

你想要什么？