Question

我被我的剧本困住了，我希望我可以解释我的问题，因为解释起来很复杂。我的导航有两个分开的＆lt; ul＆gt;每3个级别。显示两个UL上的第一个级别，并隐藏另外两个嵌套的级别。如果我单击带有嵌套UL的链接，它将从右向左滑动，级别1 UL将获得类名“无效”，如此＆lt; ul class =“inactive”＆gt;否则链接将打开。第二级也是如此。

这样可以正常工作但仅适用于相同的UL树。 2个分离的UL应该表现得像一个。要了解我的问题，请查看以下链接：http://jsfiddle.net/VZTR9/

标记看起来像这样

<nav id="mobile-nav">
<ul>
    <li><a href="#" title="Nav">(ul 1) Link</a>
        <ul>
            <li><a href="#" title="Sub Nav">(ul 1) Link 2</a>
                <ul>
                    <li><a href="#" title="Sub Nav 2">(ul 1) Link 3</a></li>
                    <li><a href="#" title="Sub Nav 2">(ul 1) Link 3</a></li>
                </ul>
            </li>
            <li><a href="#" title="Sub Nav">(ul 1) Link 2</a></li>
            <li><a href="#" title="Sub Nav">(ul 1) Link 2</a></li>
        </ul>
    </li>
    <li><a href="#" title="Nav">(ul 1) Link</a></li>
    <li><a href="#" title="Nav">(ul 1) Link</a></li>
    <li><a href="#" title="Nav">(ul 1) Link</a></li>
</ul>

<ul class="second">
    <li><a href="#" title="Nav">(ul 2) Link</a>
        <ul>
            <li><a href="#" title="Sub Nav">(ul 2) Link 2</a>
                <ul>
                    <li><a href="#" title="Sub Nav 2">(ul 2) Link 3</a></li>
                    <li><a href="#" title="Sub Nav 2">(ul 2) Link 3</a></li>
                </ul>
            </li>
            <li><a href="#" title="Sub Nav">(ul 2) Link 2</a></li>
            <li><a href="#" title="Sub Nav">(ul 2) Link 2</a></li>
        </ul>
    </li>
    <li><a href="#" title="Nav">(ul 2) Link</a></li>
    <li><a href="#" title="Nav">(ul 2) Link</a></li>
    <li><a href="#" title="Nav">(ul 2) Link</a></li>
</ul></nav>

脚本

$('#mobile-nav').on('click', 'a', function(){

var navWidth    = jQuery('#mobile-nav').width();
var speed       = 200;

if( jQuery(this).closest('ul').hasClass('inactive') ){
    //alert("has inactive class");

    jQuery(this).closest('ul').find('ul').animate({
        right: '-' + navWidth,
        opacity: "hide"
    }, speed);

    jQuery(this).closest('ul').removeClass('inactive');
    jQuery(this).closest('ul').find('ul').removeClass('inactive');
    return false;

} else {
    //alert("no inactive class");

    if( ( jQuery(this).parent().has('ul').length > 0 ) && ( !jQuery(this).parent().find('ul').is(':visible') ) ) {
        //alert("has ul and is visible");

        jQuery(this).closest('ul').addClass('inactive');
        jQuery(this).next('ul').animate({
            right: "0px",
            opacity: "show"
        }, speed);

        return false;
    } else {
        alert("open Link");
        return false;
    }
}});

感谢您的帮助！

Answer 1

这是因为你的jQuery选择器太高了。 .find()获取与选择器匹配的所有子项。您需要更具体地选择ul s

jQuery两个分离的UL如何表现得像一个

1 个答案: