jQuery菜單 - addClass X removeClass Y和Z

我有一個菜單列表，我想添加或刪除一個類的項目鏈接，以及隱藏以前的應用類到相同的列表只應用類到點擊物品。
此外，我還想顯示該項目的隱藏div，隱藏由任何其他項目點擊觸發的任何div。jQuery菜單 - addClass X removeClass Y和Z

這對我有用，但我覺得我錯過了一些可以讓它更簡單，也許我錯了，或者我不是，我想知道您的意見和建議。

$("ul li:first-child").click(function(){ 
    $("ul li:first-child").toggleClass('lihover'); 
    $("ul li:nth-child(2), ul li:nth-child(3)").removeClass('lihover'); 
    $(".item1").fadeToggle(); 
    $(".item2, .item3").hide(); 
});

基本上小提琴會爲我自己說話。
請檢查它是否有更好的理解。 http://jsfiddle.net/fyjHk/1/

請記住，這是按預期工作，我只是想知道是否有任何其他方式使用較少的步驟（代碼）來做到這一點。這是因爲，想象一下，如果我有一個包含20個項目的菜單，將它們全部列出以隱藏和/或顯示在代碼IMO中有點污染，所以也許有一種方法可以簡化這一點。

請記住，我是jQuery和Javascript的新手，帶上一點鹽。

預先感謝您

來源

2014-03-26 Hélio C

您可以嘗試http://jsfiddle.net/fyjHk/9/ – Satpal

就個人而言，我會用這個解決方案去：http://jsfiddle.net/fyjHk/10/。

它重複使用更多的代碼，保持乾淨。它還利用一些方便的jQuery函數來使事情更加緊湊和通用。

HTML：

<ul> 
    <li data-id='item1'>item 1</li> 
    <li data-id='item2'>item 2</li> 
    <li data-id='item3'>item 3</li> 
    <li>hide all</li> 
</ul> 

<div id="item1" class="item hide">Content For Item 1</div> 
<div id="item2" class="item hide">Content For Item 2</div> 
<div id="item3" class="item hide">Content For Item 3</div>

通過讓li元素持有哪些div他們再加上信息，爲您節省了大量的JS代碼，使其更易於添加和刪除的項目。此外，要標識一個元素，最好使用id，並將class用於共享某個邏輯的元素組。在這種情況下，所有div的項目，但也有一個ID加上li。

的Javascript：

$("ul li[data-id]").click(function(){ 
    $(this).toggleClass('lihover').siblings().removeClass('lihover'); 
    $("#" + $(this).data("id")).fadeToggle().siblings(".item").hide(); 
}); 

$("ul li:last-child").click(function(){ 
    $(".item").hide(); 
    $("ul li[data-id]").removeClass('lihover'); 
});

一個關於讓li元素的好東西保持信息是可以減少對代碼的重複和編寫更乾淨的選擇。 siblings函數，您可以輕鬆地選擇其他元素，而不必在代碼中全部定義它們。

來源

2014-03-26 13:28:57 gpgekko

你好，感謝您的回覆。你的小提琴並不像我的一樣工作。我錯過了什麼嗎？ /我的意思是，班級，當我點擊項目1時，它應用了，但是當我點擊項目2時，項目1中的班級仍然存在。此外，div內容不會被顯示。 –

@HélioC對不起，我犯了一個錯字。看到更新的小提琴。 – gpgekko

^這！非常感謝您對這些話題的時間和解釋。它清除了很多東西。特別是添加data-id來耦合特定的div。標記爲解決方案。再次感謝你。 HC –

你可以避開所有的重複，做這樣的事情：

$("ul li").on('click', function(){ 
    $('.items div').fadeOut(0);  
    $('.items div').eq($(this).index()).fadeIn(300); 
});

你可能需要編輯有點添加和刪除活動類。

JSFiddle Demo

來源

2014-03-26 13:29:37

你好尼克，謝謝你的回覆。如果我理解正確，你的代碼'說'是什麼：所有.items fadeout在點擊，然後在.items div中匹配被點擊li的位置的項目將淡入。它是否正確？ –

@HélioC是的，這是正確的，我使用'.index（）'得到哪個'li'被點擊的索引，然後我們可以將'index'傳遞給'eq（）'方法，所以我們顯示相關的'item div' –

明白了。我編輯了你的小提琴來完成我的問題的標題中提出的主要問題......如果你想將它添加到你的答案，所以它使它100％完成，你可以在這裏檢查它。 http://jsfiddle.net/fyjHk/11/。非常感謝您的寶貴時間。 –

最簡單的，我可以看到：

$("ul li").click(function(){ 
    var _this = $(this); 
    var index = _this.index(); 

    // Reset 
    var hover = _this.hasClass('lihover'); 
    $('ul li').removeClass('lihover'); 

    if(_this.hasClass('hide-all')) { 
     $('.item').hide(); 
    } else { 
     if (!hover) { 
      _this.addClass('lihover'); 
     } 
     $('.item').eq(index).fadeToggle(); 
     $('.item').eq(index).siblings('.item').hide(); 
    } 
});

http://jsfiddle.net/fyjHk/4/ 新小提琴： http://jsfiddle.net/fyjHk/12/

來源

2014-03-26 13:31:47 Bene

這正是我說的時候所看到的（更少的步驟）。我只會遇到一個問題，那就是：當您單擊項目時，如果再次單擊它，則應用的類將保留「懸停」狀態，或者恢復最初的狀態。 –

增加了你所要求的！ – Bene

$("ul li").click(function(){ 
    var li = $(this).parent().children(), 
     sel = li.index($(this)) + 1; 
    if(sel == 4) 
     return $('.hide').hide(); 
    li.each(function(i){ 
     $('.item' + i)[i == sel ? "fadeIn" : "hide"](); 
    }); 
});

來源

2014-03-26 13:38:12 Alethes

jQuery菜單 - addClass X removeClass Y和Z

回答

相關問題