Question

我有一个侧边栏折叠菜单，它也有下拉菜单。当我点击下拉列表并单击链接时，下拉菜单会折叠。我想保持打开并突出显示链接，直到点击其他链接。我该怎么做？任何帮助。

直到点击其他链接。我想活跃如下。

HTML代码

<ul class="page-sidebar-menu page-sidebar-menu-light">
    <li>
        <a href="javascript:;">
            <i class="icon-logout"></i>
            <span class="title">Quick Sidebar</span>
            <span class="arrow "></span>

        </a>
        <ul class="sub-menu">
            <li>
                <a href="quick_sidebar_push_content.html">
                    Push Content
                </a>
            </li>
            <li>
                <a href="quick_sidebar_over_content.html">
                    Over Content
                </a>
            </li>
            <li>
                <a href="quick_sidebar_over_content_transparent.html">
                Over Content &amp; Transparent
                </a>
            </li>
            <li>
                <a href="quick_sidebar_on_boxed_layout.html">
                    Boxed Layout
                </a>
            </li>
        </ul>
    </li>
    <li>
        <a href="javascript:;">
            <i class="icon-envelope-open"></i>
            <span class="title">Email Templates</span>
            <span class="arrow "></span>

        </a>
        <ul class="sub-menu">
            <li>
                <a href="email_template1.html">
                    New Email Template 1
                </a>
            </li>
            <li>
                <a href="email_template2.html">
                    New Email Template 2
                </a>
            </li>
            <li>
                <a href="email_template3.html">
                    New Email Template 3
                </a>
            </li>
            <li>
                <a href="email_template4.html">
                    New Email Template 4
                </a>
            </li>
            <li>
                <a href="email_newsletter.html">
                    Old Email Template 1
                </a>
            </li>
            <li>
                <a href="email_system.html">
                    Old Email Template 2
                </a>
            </li>
        </ul>
    </li>
    <li class="last ">
        <a href="javascript:;">
            <i class="icon-pointer"></i>
            <span class="title">Maps</span>
            <span class="arrow "></span>

        </a>
        <ul class="sub-menu">
            <li>
                <a href="maps_google.html">
                    Google Maps
                </a>
            </li>
            <li>
                <a href="maps_vector.html">
                    Vector Maps
                </a>
            </li>
        </ul>
    </li>
</ul>

Answer 1

这可以帮助您：

$(".sub-menu li").on("click",function(){

            $(".sub-menu li").removeClass("active");

            $(this).addClass("active");

})

最终代码：

<html>
    <head>
        <meta charset="utf-8">
        <style>
            .sub-menu {
                display: none;
            }
            .active {
                background-color: gray;
            }
        </style>
    </head>
    <body>
        <ul class="page-sidebar-menu page-sidebar-menu-light">
    <li>
                <a href="javascript:;">
                <i class="icon-logout"></i>
                <span class="title">Quick Sidebar</span>
                <span class="arrow "></span>
                </a>
                <ul class="sub-menu">
                    <li>
                        <a href="quick_sidebar_push_content.html">
                        Push Content</a>
                    </li>
                    <li>
                        <a href="quick_sidebar_over_content.html">
                        Over Content</a>
                    </li>
                    <li>
                        <a href="quick_sidebar_over_content_transparent.html">
                        Over Content & Transparent</a>
                    </li>
                    <li>
                        <a href="quick_sidebar_on_boxed_layout.html">
                        Boxed Layout</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">
                <i class="icon-envelope-open"></i>
                <span class="title">Email Templates</span>
                <span class="arrow "></span>
                </a>
                <ul class="sub-menu">
                    <li>
                        <a href="email_template1.html">
                        New Email Template 1</a>
                    </li>
                    <li>
                        <a href="email_template2.html">
                        New Email Template 2</a>
                    </li>
                    <li>
                        <a href="email_template3.html">
                        New Email Template 3</a>
                    </li>
                    <li>
                        <a href="email_template4.html">
                        New Email Template 4</a>
                    </li>
                    <li>
                        <a href="email_newsletter.html">
                        Old Email Template 1</a>
                    </li>
                    <li>
                        <a href="email_system.html">
                        Old Email Template 2</a>
                    </li>
                </ul>
            </li>
            <li class="last ">
                <a href="javascript:;">
                <i class="icon-pointer"></i>
                <span class="title">Maps</span>
                <span class="arrow "></span>
                </a>
                <ul class="sub-menu">
                    <li>
                        <a href="maps_google.html">
                        Google Maps</a>
                    </li>
                    <li>
                        <a href="maps_vector.html">
                        Vector Maps</a>
                    </li>
                </ul>
            </li>
         </ul>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
        $(document).ready(function(){
            $("a").attr("href","#");
            $(".title:contains(Quick Sidebar)").on("click",function(){
                 $(".sub-menu").not($(".sub-menu").eq(0)).hide(500);
                $(".sub-menu").eq(0).toggle(2000);
            })
            $(".title:contains(Email Templates)").on("click",function(){
                $(".sub-menu").not($(".sub-menu").eq(1)).hide(500);
                $(".sub-menu").eq(1).toggle(2000);
            })
            $(".title:contains(aps)").on("click",function(){
                $(".sub-menu").not($(".sub-menu").eq(2)).hide(500);
                $(".sub-menu").eq(2).toggle(2000);
            })
            $(".sub-menu li").on("click",function(){
                $(".sub-menu li").removeClass("active");
                $(this).addClass("active");
            })
        
        })
        </script>
    </body>
</html>

Answer 2

首先将css规则添加到 .selected 类或您的命名类。

$(".sub-menu li a").hover(function(e){
   /** Remove selected class first **/
   $(".sub-menu li a").removeClass("selected");
   /** add selected class on hover**/ 
   $(this).addClass("selected");
});

这可能会对你有帮助。

单击后折叠菜单打开并处于活动状态

2 个答案: