下拉列表 - 单击其他项目时隐藏

时间:2014-07-03 14:14:21

标签: jquery drop-down-menu

我正在使用编码自定义下拉列表来创建下拉菜单 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/

1 个答案:

答案 0 :(得分:0)

将DropDown原型更改为此(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