jQuery更改活動類圖標的狀態

我正在嘗試使用我的下拉列表中的圖標創建活動狀態。基本上，它應該在li不活動時顯示+圖標，然後在li活動時顯示 - 圖標，反之亦然。jQuery更改活動類圖標的狀態

的jsfiddle http://jsfiddle.net/tebrown/uzrbbqx9/1/

$('#cssmenu > li:has(ul)').addClass("has-sub"); 

var checkCookie = $.cookie("nav-item"); 
if (checkCookie != "") { 
$('#cssmenu > li > a:eq(' + checkCookie + ')').addClass('active').next().show(); 
} 
checkCookie = $.cookie("sub_nav-item"); 
if (checkCookie != "") { 
$('#cssmenu > li > ul > li > a:eq(' + checkCookie +  ')').addClass('active').next().show(); 
} 


$('#cssmenu > li > ul > li > a').click(function() { 
var navIndex = $('#cssmenu > li > ul > li > a').index(this); 
$.cookie("sub_nav-item", navIndex); 
var checkElement = $(this).next(); 


$(this).removeClass('testing'); 
$(this).closest('li').addClass('testing'); 
$('#cssmenu li li .active').removeClass('active'); 
$(this).addClass('active'); 
}); 

$('#cssmenu > li > a').click(function() { 
var navIndex = $('#cssmenu > li > a').index(this); 
$.cookie("nav-item", navIndex); 
$('#cssmenu li ul').slideUp(); 


if ($(this).next().is(":visible")) { 
    $(this).next().slideUp(); 
} else { 
    $(this).next().slideToggle(); 
} 
$('#cssmenu li a').removeClass('active'); 

$(this).addClass('active'); 
});

任何幫助將非常感激。

來源

2014-09-24 tebrown

所以摺疊時需要幫助刪除「活動」類嗎？ – Malk 2014-09-24 21:23:55

我修改您的jfiddle這裏：http://jsfiddle.net/uzrbbqx9/2/

在點擊事件的activeClass方法總是被解僱時，removeClass方法後直接。我將它們移入if語句中，如下所示：

if ($(this).next().is(":visible")) { 
    $(this).next().slideUp(); 
    $(this).removeClass('active'); 
} else { 
    $(this).next().slideToggle(); 
    $('#cssmenu li a').addClass('active'); 
}

來源

2014-09-24 21:26:43 Overachiever

在您的單擊事件處理程序中，您可以執行一些操作。您可以檢查菜單當前是否使用:animated jQuery選擇器進行動畫製作，和/或您可以使用stop()任何正在進行的動畫。在我的例子中，我選擇忽略點擊，如果它已經是動畫。其次，因爲動畫中，:visible選擇可以提供一些假陽性/陰性迅速單擊按鈕時，所以你應該提示過別的東西，比如活動類：

$('#cssmenu > li > a').click(function() { 
    var $a = $(this), 
     $ul = $a.next(), 
     navIndex = $('#cssmenu > li > a').index(this); 

    if ($ul.is(':animated')) 
     return; 

    $.cookie("nav-item", navIndex); 
    $('#cssmenu li a.active').not(this).removeClass('active').next().stop().slideUp(); 

    $ul.stop().slideToggle(); 
    $a.toggleClass('active'); 

});

小提琴：http://jsfiddle.net/uzrbbqx9/3/

來源

2014-09-24 21:48:36 Malk

感謝您的回覆。完美的作品。還有一個問題。如果我要從谷歌去定價頁面（在網上預訂），我怎麼能讓列表打開與定價李活躍？目前，它正常工作，只是通過網站正常，並添加活動類，但如果用戶要從谷歌訪問此網頁，它需要知道它在這個網頁上，並打開列表... – tebrown 2014-09-24 22:42:36

這將是非常類似於你的checkCookie函數。只是不是檢查cookie，而是檢查'window.location.search'或'window.location.hash'，或者你想要發送數據。如果此檢查通過，您可以將cookie設置爲匹配，然後讓checkCookie執行相應的操作。 – Malk 2014-09-24 22:50:47

嘿@malk再次感謝。這是否會複製我現有的Cookie功能？ – tebrown 2014-09-24 23:02:58

jQuery更改活動類圖標的狀態

回答

相關問題