Question

我正在尝试在我的网站上实现此菜单：

以下是代码：

<html>
    <head>
        <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="jquery.fixedMenu.js"></script>
        <link rel="stylesheet" type="text/css" href="fixedMenu_style1.css" />
        <script>
        $('document').ready(function(){
            $('.menu').fixedMenu();
        });
        </script>
    </head>
    <body>
    <div class="menu">
        <ul>
            <li>
                <a href="#">More Examples<span class="arrow"></span></a>

                <ul>
                    <li><a href="#">Plugins and jQuery Examples</a></li>
                    <li><a href="#">Prototype Examples</a></li>
                    <li><a href="#">Mootools Examples</a></li>
                    <li><a href="#">Javascript Examples</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Plugins<span class="arrow"></span></a>
                <ul>
                    <li><a href="#">Galleries</a></li>
                    <li><a href="#">DropDown Menus</a></li>
                    <li><a href="#">Content Slider</a></li>
                    <li><a href="#">LightBox</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </body>
</html>

和.js文件的代码是：

(function($){
    $.fn.fixedMenu=function(){
        return this.each(function(){
            var menu= $(this);
            menu.find('ul li > a').bind('click',function(){
            if ($(this).parent().hasClass('active')){
                $(this).parent().removeClass('active');
            }
            else{
                $(this).parent().parent().find('.active').removeClass('active');
                $(this).parent().addClass('active');
            }
            })
        });
    }
})(jQuery);

我希望当有人点击身体区域的任何地方时关闭活动菜单....

我是jquery的新手:-)，请帮忙

感谢

和Sandeep

编辑：在您的最终评论之后，这就是代码的外观。

$("html").click(function() {
   menu.find('.active').removeClass('active');
});


(function($){
    $.fn.fixedMenu=function(){
        return this.each(function(){

            var menu= $(this);

            menu.find('ul li > a').bind('click', function (event) {
              event.stopPropagation();
            });                               

            $("body:not(.menu)").hover(function(){ $(".menu").find('.active').removeClass('active');})
            menu.find('ul li > a').bind('click',function(){
            if ($(this).parent().hasClass('active')){
                $(this).parent().removeClass('active');
            }
            else{
                $(this).parent().parent().find('.active').removeClass('active');
                $(this).parent().addClass('active');
            }
            })
        });
    }
})(jQuery);

但仍未成功......

Answer 1

试试这个悬停：

$("body:not(.menu)").hover(function(){ $(".menu").find('.active').removeClass('active');})

编辑：

将点击事件绑定到html以捕获所做的任何点击，并使其隐藏菜单

$("html").click(function() {
   menu.find('.active').removeClass('active');
});

然后使用.stopPropagation（）;

覆盖菜单上的点击事件

menu.find('ul li > a').bind('click', function (event) {
  event.stopPropagation();
});

Answer 2

Jquery下拉菜单

点击操作需要捕获以关闭打开的meny，无论是点击相同的链接还是在正文上的任何位置都应该关闭菜单

在我的情况下，如果点击主链接或链接外部，即html / body上的任何地方，我想关闭一个下拉菜单

http://jsfiddle.net/austinnoronha/k2Lwj/

var toggleClick = function(){

    var divObj = $(this).next();
    var nstyle = divObj.css("display");

    if(nstyle == "none"){
        divObj.slideDown(false,function(){
            $("html").bind("click",function(){
                divObj.slideUp();
                $("html").unbind("click");
            });
        });
    }
};

$(".clickme").click(toggleClick);

单击下拉菜单中的正文区域中的任意位置时关闭菜单

2 个答案: