[英]Background colour on click - jQuery
當前,當我單擊鏈接時,它將背景色設置為紅色。 並保持紅色。 如何僅將紅色鏈接設置為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>
在前面添加一行:
$('.navtoggle').css('background','none'); // make none before adding bgcolor
$(this).css('background-color','red').next().slideToggle('fast');
給所有鏈接元素一個公共類,然后在將單擊的鏈接設置為紅色之前,設置該類中所有元素的背景色。
$('.commonClass').css('background-color', 'none');
$(this).css('background-color', 'red').next().slideToggle('fast');
$(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');
});
});
您可以通過在活動元素上添加一個類來實現。
$(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');
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.