Изменить цвет фона ссылки при нажатии ссылки с помощью jQuery

Question

У меня есть основной аккордеон jQuery. Я бы хотел изменить цвет фона по ссылке, если эта ссылка нажата.

Так что, если я нажму «Dropdown 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"> 
 
\t <ul class="inline naked"> 
 
     <li class="primary-item"><a href="http://localhost:8888/test/wordpress">Home</a></li> \t \t \t \t \t \t 
 
\t \t <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> 
 
\t \t \t <ul class="sub-menu"> 
 
\t \t \t \t <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> 
 
\t \t \t \t \t <ul class="sub-menu"> 
 
\t \t \t \t \t \t <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> 
 
\t \t \t \t \t \t <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> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </li> 
 
\t \t \t </ul> 
 
\t \t </li> 
 
\t </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> 

Javascript

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

что вы хотите?