Currently in the process of using jQuery to change the background color of a link when it's clicked. However, I would like to revert this color back to its original state once either a) the link is closed or b) another link is clicked (such as Dropdown 2).
Can anyone provide guidance on how to achieve this? Would the use of toggle be appropriate?
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>