Блог

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

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

#jquery #menu #drop-down-menu #hide

#jquery #меню #выпадающее меню #скрыть

Вопрос:

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

Вот код :

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

но по-прежнему безуспешно….

Ответ №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();
});

Комментарии:

1. Используя приведенную выше строку кода, выпадающее меню становится скрытым, когда мы зависаем за пределами блока меню, но то, что я готов сделать, это скрыть выпадающее меню, когда кто-то [ нажимает] на область тела за пределами выпадающего меню…

2. nops …… если я изменю его на [click] из [hover], выпадающий список фактически не отображается…

3. о, да, потому что .menu включен в тело… mhhh 2 секунды, и я дам вам решение

Ответ №2:

Выпадающее меню 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);