单击时隐藏和显示子目录，并添加和删除类

Question

我可能有点困惑：

我有两个导航按钮，其中一个有一个子导航。当我单击链接1一次时，这应该会向li添加一个活动类，如果还没有活动的话，那么在第二次单击时，你应该能够看到sub-v。链接2只是一个普通的按钮，单击它，将活动添加到li并重置链接1的高度。

我有几个问题，首先我想重置链接1的高度，如果我在子控件可见时单击链接1按钮，然后如果再次单击则显示它。我还想在单击链接2时从链接2中删除.active？如果有人能解释一种更好的方式来完成这项任务，那就太好了，谢谢！

我的JavaScript:

$(document).ready(function(){
    $('#link1').click(function(e) {    
        if( $(this).parent().hasClass('active') ) {
            $(this).parent().css('height', '90');
        } else {
            $(this).parent().addClass('active');
        }
        // if i click again i want to reset css height to 45?
    });
    $('#link2').click(function(e) {
        if( !$(this).parent().hasClass('active') ) {
            $('#navigation > li').removeClass('active');
            $('#link1').parent().css('height', '45');
            $(this).parent().addClass('active');
        }
    });
});

我的HTML:

<ul id="navigation">
    <li class="active">
        <a href="#" id="link1">Link 1</a>
        <ul id="inner">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 1</a></li>
        </ul>
    </li>
    <li><a href="#" id="link2">Link 2</a></li>
</ul>

此处链接到jsbinhttp://jsbin.com/utuwor/3/edit

Answer 1

您可以在不需要所有ID的情况下实现这一点，只需控制显示throw CSS的子导航：http://jsfiddle.net/J7aVC/1/

jQuery(function($) {  // This is a shorten for jQuery.ready and you are sure that $ === jQuery in this scope
    $("#navigation li > a").bind("click", function() {
        var $this = $(this),
            hasActive = !!$this.parent(".active").length;
        if ( !hasActive ) {
            $this.closest("ul").find(".active").removeClass("active");
            $this.parent().andSelf().addClass("active");
        }
    });
});​

和你的CSS：

#navigation li > ul {
    display:none;
}
#navigation li.active > ul {
    display:block;
}

这适用于中列表中的列表

-> List1
    -> List1.1
    -> List1.2
        -> List1.2.1
            -> List 1.2.1.1
        -> List1.2.1
    -> List1.3
-> List2

等等。。。

---

E > E、!!、andSelf()、closest：

E > E表示您在E中搜索它的子项E.

在你的CSS中你有：

#navigation li.active > ul

这意味着作为li.active的子级的任何ul-标签都将可见。

举个例子：

ul#navigation
    -> li.active
        -> ul // This is visible
            -> li
                -> ul // This is not
            -> li
    -> li
        -> ul // This is not

!!将任何字符串、对象、整数等转换为布尔值。

任何错误值（"", 0, null, undefined, false, NaN）变为false

andSelf()是一个jQuery方法，它接受过滤后的语句，并包括它的原始选择器。这与编写相同

$(this).parent().add( this );
$(this).parent().andSelf();

但如果你有一个长选择器，那就很好了：

$("#very .long .selector.we > .have .to.search").parent().add("#very .long .selector.we > .have .to.search");
$("#very .long .selector.we > .have .to.search").andSelf();

---

您可以使用closest()从当前元素开始，向上遍历DOM树。