Question

请参阅此菜单：http://maxim.comze.com

第三个按钮打开一个滑动面板关闭它，我希望其他按钮也关闭面板，如果它已经打开。我知道这与添加acitem和if / else语句有关，但我没有经验。非常感谢。

这是菜单代码：

$('li hometog, li jredtog, li servicestog',this).click(function(e){       
    e.stopImmediatePropagation();
    var theElement=$(this).next();
    var parent=this.parentNode.parentNode;

    if($(parent).hasClass('noaccordion')){
        if(theElement[0]===undefined){window.location.href=this.href}
        $(theElement).slideToggle('normal',function(){
            if($(this).is(':visible')){
            $(this).prev().addClass('active')
    }else{
        $(this).prev().removeClass('active')}});
        return false
    }else{
        if(theElement.hasClass('acitem')
        &&theElement.is(':visible')){if($(parent).hasClass('collapsible')){
           $('.acitem:visible',parent).first().slideUp('normal',function(){
               $(this).prev().removeClass('active')
           });
           return false
        }
    return false
    }

    if(theElement.hasClass('acitem')&&!theElement.is(':visible')){
          $('.acitem:visible',parent).first().slideUp('normal',function(){
               $(this).prev().removeClass('active')});

               theElement.slideDown('normal',function(){
                    $(this).prev().addClass('active')});

                     return false}
    }
}) 
})
};

这是第3个按钮的代码：

$("servicestog").click(function(){
    $(".panel").toggle("slide",{direction: "right"},500);
    $(this).prev().addClass('active')
    return false;
});

Answer 1

到目前为止，最简单的解决方案是在您单击其中一个菜单项时调用另一个函数，如果它显示，则会隐藏侧面板。所以，加上这个：

// When clicking on 'hometog' or 'jredtog'
$('li hometog, li jredtog', this).click(function (e) {
    // if the panel is visible, hide it
    $('.panel:visible').hide("slide", { direction: "right" }, 500);
});

在您现有的点击处理程序之上：

$('li hometog, li jredtog, li servicestog', this).click(function (e) {

给予你的行为。

此刻构建单击处理程序的方式的问题是，只要您单击任何菜单项（激活下拉菜单项和激活/隐藏面板项），它就会触发。这意味着在处理程序的某个时刻，您需要确定触发单击处理程序的元素是否是显示该面板的元素，以便您可以决定是否需要隐藏。

这可以通过在现有的处理程序中添加这样的东西（在任何分支逻辑之前）来完成：

if (!$(this).is('servicestog')) {
    $('.panel:visible').hide("slide", { direction: "right" }, 500);
}

另一种方法是在激活面板的菜单项中添加另一个类activatesPanel：

<servicestog class="activatesPanel">Menu 3</servicestog>

然后你可以在现有的处理程序中做这样的事情：

if (!$(this).hasClass('activatesPanel')) {
    $('.panel:visible').hide("slide", { direction: "right" }, 500);
}

似乎有一些逻辑试图使用acitem和active类来做类似的事情，但是这个逻辑应该如何起作用并不是很清楚与小组讨论。

Answer 2

也许这对你有用处？

$('li hometog, li jredtog, li servicestog',this).click(function(e){       
e.stopImmediatePropagation();
var theElement=$(this).next();
var parent=this.parentNode.parentNode;

if($(parent).hasClass('noaccordion')){
    if(theElement[0]===undefined){window.location.href=this.href}
    $(theElement).slideToggle('normal',function(){
        if($(this).is(':visible')){
        $(this).prev().addClass('active')
} else if(theElement.hasClass('acitem')&&theElement.is(':visible')){
       if($(parent).hasClass('collapsible')){
       $('.acitem:visible',parent).first().slideUp('normal',function(){
           $(this).prev().removeClass('active')
       });
       return false
    }
return false
}else{
    $(this).prev().removeClass('active')}});
    return false
}

if(theElement.hasClass('acitem')&&!theElement.is(':visible')){
      $('.acitem:visible',parent).first().slideUp('normal',function(){
           $(this).prev().removeClass('active')});

           theElement.slideDown('normal',function(){
                $(this).prev().addClass('active')});

                 return false}
}
}) 
})
};

需要修改jQuery手风琴菜单

2 个答案: