Question

我有一个无序列表，我使用左侧导航，每个列表项都是指向不同页面的链接，这是可折叠和可扩展的。

中使用以下脚本

HTML：

<ul class="navi-list">
    <li class="no-subitem">
        <a class="current">Overview</a>
         <span class="navi-current"></span>
    </li>
    <li>
        <a class="has-subitem">
            <i class="fa fa-caret-right fw"> </i> Policies & Procedures 
        </a>
        <ul class="submenu">
            <li>
                <a href="#"> Documents & Resources </a>
            </li>
            <li>
                <a href="#"> Upcoming Events </a>
            </li>
            <li>
                <a href="#"> News </a>
            </li>
            <li>
                <a href="#"> Announcements </a>
            </li>
        </ul>
    </li>
    <li>
        <a class="has-subitem">
            <i class="fa fa-caret-right fw"> </i> Feeds & Discussions 
        </a>
        <ul class="submenu">
            <li>
                <a href="#"> Blog & Podcasts </a>
            </li>
            <li>
                <a href="#"> Photos & Videos </a>
            </li>
        </ul>
    </li>
    <li>
        <a class="has-subitem">
            <i class="fa fa-caret-right fw"> </i> About Us 
        </a>
        <ul class="submenu">
            <li>
                <a href="#"> FAQs </a>
            </li>
            <li>
                <a href="#"> Contact Us </a>
            </li>
        </ul>
    </li>
</ul>

使用Javascript：

$(".has-subitem").next(".submenu").hide();
/*    
    if($(".submenu > li > a").find("current")){
        var $here = $('this').parents().eq(1); 
        $('.submenu').show();
    }
*/
$(document).on("click", ".has-subitem", function () {
    $(this).next(".submenu").slideToggle();
    $(this).find('i').toggleClass("fa-caret-right fa-caret-down");
});

现在，当我转到任何内部链接（这是一个单独的目标链接页面附加了一个额外的类当前链接）时，我希望打开该特定列表并关闭其他列表。不知道如何实现它。

我在小提琴里面尝试了注释代码。但它打开了所有项目，而不是当前活跃的项目。

点击该链接后，新的目标网页导航菜单将显示此内容，

<ul class="navi-list">
                            <li class="no-subitem">
                                <a href="hr-page.html">Overview</a>

                            </li>
                            <li><a class="has-subitem"><i class="fa fa-caret-right fw"> </i> Policies & Procedures </a>
                                <ul class="submenu">
                                    <li ><a class="current" href="#"> Documents & Resources </a>
                                    <span class="navi-current"></span>
                                    </li>
                                    <li><a href="#"> Upcoming Events </a></li>
                                    <li><a href="#"> News </a></li>
                                    <li><a href="#"> Announcements </a></li>
                                </ul>
                            </li>
                            <li><a class="has-subitem"><i class="fa fa-caret-right fw"> </i> Feeds & Discussions </a>
                                <ul class="submenu">
                                    <li><a href="#"> Blog & Podcasts </a></li>
                                    <li><a href="#"> Photos & Videos </a></li>
                                </ul>
                            </li>
                            <li><a class="has-subitem"><i class="fa fa-caret-right fw"> </i> About Us </a>
                                <ul class="submenu">
                                    <li><a href="#"> FAQs </a></li>
                                    <li><a href="#"> Contact Us </a></li>
                                </ul>
                            </li>
                        </ul>

正如你所看到的，我需要找到当前的，并且在关闭其他子菜单的同时单独扩展子菜单。

由于

Answer 1

您需要从其他列表中找到选择submenu，使用.slideUp()隐藏它们：

$(document).on("click",".has-subitem",function(){
        $('.submenu').not($(this).next()).toggleClass("fa-caret-right fa-caret-down").slideUp();
        $(this).next(".submenu").slideToggle();
        $(this).find('i').toggleClass("fa-caret-right fa-caret-down");
    });

<强> Working Demo

根据子事件查找父元素

1 个答案: