Закрытие меню при нажатии в любом месте области тела вне выпадающего меню - PullRequest
Новая
       20

Закрытие меню при нажатии в любом месте области тела вне выпадающего меню

0 голосов
/ 02 ноября 2011

Я пытаюсь реализовать это меню на моем веб-сайте:

Вот код: 

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

но все равно безуспешно ....

Ответы [ 2 ]

0 голосов
/ 03 марта 2014

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);
0 голосов
/ 02 ноября 2011

Попробуйте это для парения: 

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

Редактировать:

Привязать событие клика к html, чтобы зафиксировать любой сделанный клик, и скрыть меню 

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

Затем переопределите это в событии click вашего меню, используя .stopPropagation (); 

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