单击并隐藏和显示子窗口并添加和删除类

Question

想想我可能会有点困惑：

我有2个导航按钮，其中1个有子按钮。当我单击链接1时，如果尚未激活，则应该向li添加活动类，在第二次单击时，您应该能够看到子视图。链接2只是一个普通按钮，单击它然后您将激活添加到li并重置链接1高度。

我有几个问题，首先我要重置链接1的高度，如果我在子窗口可见时点击链接1按钮然后再显示它再次点击等。我也想从链接中删除.active 2当我点击Link 2时？如果有人能够解释一个更好的完成这项任务的方法，那就太棒了，谢谢！

我的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>

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

Answer 1

你可以做到这一点，而没有所有ID只是控制子导航显示抛出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

这意味着ul的所有li.active - 标记变为可见。

举个例子：

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树。