jQuery菜单 - addClass X removeClass Y和Z.

Question

I have a List for a Menu and I want to Add or Remove a class to the Item Link, as well as hide previous applied classes to the same list applying only the class to the clicked Item.
In addition I also want to display a hidden div for the item, hiding any div triggered by the click on any of the other items.

This is working for me, but I feel like I'm missing something that will make it simpler, maybe I'm wrong, or maybe I'm not, I'd like to know your opinion and suggestions.

$("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();
});

Basically the fiddle will talk for myself.
Please Check it for a better understanding. http://jsfiddle.net/fyjHk/1/

Keep in mind, this is working as intended, I just want to know if there's any other way to do this with less steps (code). This because, imagine if I have a menu with 20 Items, list them all to hide and/or show is a bit polluted in the code IMO, so maybe there's a way to simplify this.

Keep in mind I'm new to jQuery and Javascript, take this with a bit of salt.

Thank you in advance

Answer 1

Personally, I'd go with this solution: http://jsfiddle.net/fyjHk/10/ .

It reuses much more code, keeping things clean. It also utilizes some handy jQuery functions to make things more compact and generic.

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>

By letting the li elements hold the information about which div they are coupled with, you save a lot of JS code and make it easier to add and remove items. Also, to identify one element its always best to use an id and use a class for a group of elements who share a certain logic. In this case, all div s items, but also have an id to be coupled with the 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');
});

One of the nice things about letting the li elements hold the info is that you can cut down on code duplication and write cleaner selectors. The siblings function, you can easily select the other elements instead of having to define them all in your code.

Answer 2

You could avoid all the duplication, by doing something like this:

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

You'll probably have to edit it a bit to add and remove the active class.

JSFiddle Demo

Answer 3

Easiest i could see:

$("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/ new fiddle: http://jsfiddle.net/fyjHk/12/

Answer 4

$("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"]();
    });
});