Блог

Я использую пользовательские выпадающие списки codedrops для создания выпадающего меню http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling /

Однако я не могу закрыть один пункт меню, если я нажму на другой пункт меню, также потому, что у меня есть второй вложенный список, который переключается в главном списке, я могу скрыть выпадающий список, когда я нажимаю на активную ссылку.

Мне нужно, чтобы выпадающий список закрывался, если я нажимаю либо на второй элемент навигации, за пределами меню, либо если я нажимаю на навигационную ссылку во второй раз (но теперь, когда я нажимаю на вторую выпадающую ссылку)

         function DropDown(el) {
            this.dd = el;
            this.initEvents();
        }
        DropDown.prototype = {
            initEvents : function() {
                var obj = this;

                obj.dd.on('click', function(event){
                    $(this).addClass('active');
                    event.stopPropagation();
                }); 
            }
        }

        $(function() {

            var dd = new DropDown( $('.ddMenu') );

            $(document).click(function() {
                $('.ddMenu').removeClass('active');
            });

        });


        $(function () {
        var $subs = $('li.expanded > ul').hide();

        $('li.expanded > a').click(function (e) {
            var $ub = $(this).next().stop(true, true).slideToggle(300, function(){
                $('li.expanded > a').addClass('close').removeClass('open');
                if($ub.is(':visible')){
                   $(this).prev('a').addClass('open').removeClass('close');
                }
            });

            $subs.not($ub).slideUp();
            e.preventDefault();
        });
  

http://jsfiddle.net/u48Pn/

Измените свой прототип выпадающего списка на этот (JSFiddle code):

 DropDown.prototype = {
                initEvents : function() {
                    var obj = this;

                    obj.dd.on('click', function(event){
                        if(!$(event.target).hasClass('secondDropDown'))
                        {
                           if($(this).hasClass('active'))
                               $(this).removeClass('active');
                           else
                               $(this).addClass('active');
                           event.stopPropagation();
                        }
                    }); 
                }
            }
  

ОБНОВЛЕН КОД: JSFiddle code