3深jquery ul列表 - 只需要第二個ul顯示當第一次點擊

我有一個三深ul列表。當點擊頂部ul時，我只希望第二個ul顯示。然後當第二個ul被點擊時，第三個應該顯示。現在發生的是當第一個ul被點擊時，所有ul的下方顯示。我怎樣才能使這個工作正常？3深jquery ul列表 - 只需要第二個ul顯示當第一次點擊

代碼：

jQuery(document).ready(function() { 
    jQuery('.list-year').addClass('list-year-left'); 
    jQuery('.list-year').on('click',(function() { 
    jQuery('.list-year').toggleClass('list-year-down'); 
    jQuery('.list-month').toggle(); 
    })); 

});

我有一個js小提琴鏈接：http://jsfiddle.net/7xbjr/4/任何幫助，非常感謝！

來源

2013-03-03 user1625714

不應該有一些使用'$（本）「在處理者？否則，您可以切換所有年份和月份，而不僅僅是您點擊UL時的那些。你的小提琴只有一年和一個月，所以它不會遇到這個問題。 – Barmar 2013-03-03 14:18:26

<li>的等級是list-post，但您已將其定義爲list-posts，它與此不匹配。

.list-posts { 
    display: none; 
}

應該成爲

.list-post { 
    display: none; 
}

而且，點擊事件應綁定到<li>元素而不是<ul>。請注意，如果您在children元素中綁定了一個click事件，建議停止事件傳播，否則click事件將傳播到父級的click事件。

這裏是JavaScript

jQuery(document).ready(function() { 
    jQuery('.list-year').addClass('list-year-left'); 
    jQuery('.list-year > li').on('click', function() { 
     jQuery('.list-year').toggleClass('list-year-down'); 
     jQuery('.list-month').toggle(); 
    }); 

    jQuery('.list-month > li').on('click',function(e) { 
     e.stopPropagation(); // add this for avoiding click event propagate to parent 
     jQuery('.list-post').toggle(); 
    }); 
});

的jsfiddle：http://jsfiddle.net/BMc43/2/

來源

2013-03-03 14:14:27 Derek

您的代碼可以更加整潔，但在這裏，你去http://jsfiddle.net/BMc43/3/：

jQuery(document).ready(function() { 
    jQuery('.list-year').addClass('list-year-left'); 
    jQuery('.list-year').on('click',(function() { 
     jQuery('.list-year').toggleClass('list-year-down'); 
     jQuery('.list-month').toggle(); 
    })); 

    jQuery('.list-month').on('click',(function(e) { 
     e.stopPropagation(); 
     jQuery('.list-post').toggle(); 
    })); 
});

當然，你必須改變.list-posts Derek說，在CSS中使用.list-post。

來源

2013-03-03 14:14:35

下面的事情是錯誤的：

你有一個班級列表後，你把它稱爲列表的帖子。
無論您何時單擊某個子節點，都會觸發您的點擊事件，再次觸發切換並關閉菜單。
你需要第三級菜單

http://jsfiddle.net/7xbjr/5/ 這裏增加一個額外的點擊事件是一個更新的小提琴其中工程

jQuery(document).ready(function() { 
jQuery('.list-year').addClass('list-year-left'); 
    jQuery('.list-year > li').on('click',function() { 
    jQuery('.list-year').toggleClass('list-year-down'); 
    jQuery('.list-month').toggle(); 
    }); 
    jQuery('.list-month > li').on('click',function() { 
    jQuery('.list-post').toggle(); 
    }); 
});

來源

2013-03-03 14:16:44 Rodik

Thanx！這是完美的。 – user1625714 2013-03-04 05:45:15

它是習慣於upvote並選擇一個正確的答案，一旦你找到一個工程。 =） – Rodik 2013-03-04 12:26:06

3深jquery ul列表 - 只需要第二個ul顯示當第一次點擊

回答

相關問題