2

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

第三个按钮打开一个滑动面板关闭它，如果它已经打开，我希望其他按钮也关闭面板。我知道这与 add 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}
    }
}) 
})
};

这是第三个按钮的代码：

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

2 回答 2

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

似乎有一些逻辑试图使用acitemandactive类来做类似的事情，但是目前还不清楚这个逻辑应该如何工作，并且它似乎在面板上有点下降。

于 2012-06-19T12:51:45.503 回答
0

也许这对你有用？

$('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}
}
}) 
})
};
于 2012-06-19T09:15:37.303 回答