单击下拉菜单之外的主体区域中的任意位置时关闭菜单

发布于 2024-12-13 11:35:58 字数 3310 浏览 1 评论 0原文

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

这是代码：

<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);

我希望当有人单击正文区域中的任何位置时关闭活动菜单......

我是新手to 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);

但仍然没有成功......

原文

I am trying to implement this menu in my web site :

Here is the code :

<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>

and the code for .js file is :

(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);

I want the active menu to be closed when someone clicks anywhere in the body area....

I am a newbie to jquery :-) , pls help

thanks

Sandeep

Edit : after your final comments this is how the code looks .

$("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);

but still no success....

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

仅此而已 2024-12-20 11:35:58

尝试悬停：

$("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();
});

Try this for hover :

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

Edit :

Bind a click event to html to capture any click made, and make it hide the menu

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

Then override that on your menu's click event using .stopPropagation();

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

回复收藏 0 原文

挽容 2024-12-20 11:35:58

Jquery 下拉菜单

需要捕获点击操作来关闭打开的菜单，单击同一链接或正文上的任何位置都应关闭菜单

在我的情况下，我想关闭下拉菜单如果单击主链接或链接外部（即 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);

Jquery Drop Down Menu

The on click action on the needs to be captured to close the open meny either clicked on the same link or anywhere on body should close the menu

In my case i wanted to close a drop down menu if its clicked on primary link or outside the link i.e. anywhere on the 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);

回复收藏 0 原文

~没有更多了~