如何关闭点击下拉列表

时间:2017-09-28 12:01:52

标签: javascript jquery html css

这是我在javascript中的切换菜单代码,我希望它关闭一个.ownavigation .nav li点击一下,这怎么可能?请帮助别人

function menu_dropdown_open(){
    var width = $(window).width();
    if($(".ownavigation .nav li.ddl-active").length ) {
        if( width > 991 ) {
            $(".ownavigation .nav > li").removeClass("ddl-active");
            $(".ownavigation .nav li .dropdown-menu").removeAttr("style");
        }
    } else {
        $(".ownavigation .nav li .dropdown-menu").removeAttr("style");
    }
}

$(".ddl-switch").on("click", function() {
        var li = $(this).parent();
        if ( li.hasClass("ddl-active") || li.find(".ddl-active").length !== 0 || li.find(".dropdown-menu").is(":visible") ) {
            li.removeClass("ddl-active");
            li.children().find(".ddl-active").removeClass("ddl-active");
            li.children(".dropdown-menu").slideUp();
        }
        else {
            li.addClass("ddl-active");
            li.children(".dropdown-menu").slideDown();
        }
    });

这是我的菜单的HTML代码,是否需要更多详细信息?感谢

<nav class="navbar ownavigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.html"><img src="assets/images/logo.png" style="max-width: 60px;">
                </div>
                <div id="navbar" class="navbar-collapse collapse">

                <div class="abz"> <span id=logowhite><img src="assets/images/logo.png" style="height: 100px; background-color:white; outline: 10px solid white;"></span>
                </div>

                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#top" title="Home">Home</a></li>
                        <li><a href="#about-section" title="Features">About us</a></li>
                        <li><a href="#network-section" title="Work">Network</a></li>
                        <li><a href="#services-section" title="Services">Services</a></li>
                        <li><a href="#footer-main" title="Contact Us">Contact</a></li>
                    </ul>
                </div>
                <div id="loginpanel" class="desktop-hide">
                    <div class="right" id="toggle">
                    </div>
                </div>
            </nav>

0 个答案:

没有答案
相关问题