Question

我创建了一个下拉菜单，但菜单的设计使得它可以在没有任何HTML知识的情况下轻松更改。因此，导航选项卡和下拉菜单不在同一元素内。

此外，所有导航选项卡都是单独的元素（这样可以在没有HTML知识的情况下编辑，删除或创建页面），因此调用每个元素如下：

导航标签为：

#PageList1 ul li:first-child,
#PageList1 ul li:first-child + li
#PageList1 ul li:first-child + li + li

等

下拉菜单是：

#Label1
#Label2
#Label3

等

因此，当＃PageList1 ul li：first-child悬停时，＃Label1将被触发为slideDown。等

为了让它在没有任何下拉菜单（#Labels）保持打开的情况下工作，当鼠标悬停某些区域时，我不得不在＃Label1（以及所有其他#Label id）上放置slideUp事件：#main， #header，或另一个#Label。

现在我正在使用条件标签处理某个页面，我需要从某个下拉菜单（＃Label1）中删除所有slideUp事件。

有没有办法解决这个问题？

由于slideUp事件不是绑定的一部分，我无法使用unbind，detach或删除所有slideUp事件。

我试图让这样的东西起作用（但没有运气）：

（Clearing a jquery document.ready() call）

（Prevent jQuery ready handlers from firing）

为了解决这个问题，我尝试克隆＃Label1并附加到一个新的div，希望它会删除附加到＃Label1但是没有的所有触发事件。

HTML：

<b:widget id='PageList1' locked='false' title='' type='PageList'>

然后在一个单独的控制器中进一步向下：

<b:section class='main' id='blank' showaddelement='yes'>
  <b:widget id='Label1' locked='false' title='' type='Label'>....</b:widget>
</b:section>
<b:section class='label-wrapper' id='house' showaddelement='yes'>
  <b:widget id='Label2' locked='false' title='' type='Label'>...</b:widget>
</b:section>
<b:section class='label-wrapper' id='garage' showaddelement='yes'>
  <b:widget id='Label3' locked='false' title='' type='Label'>...</b:widget>
</b:section>

等...

Jquery的：

$(document).ready(function(){
    $("#PageList1 ul li:first-child a").hover(function(){
        $("#Label1").slideDown(130);   
    });
    $("#Label1").mouseleave(function(){
        $("#Label1").slideUp(130);
    });
});

等...

Answer 1

我并不完全理解你对整个事情的态度，但也许以下内容会有所帮助：

更改调用.slideUp()的代码，使其仅在没有特定类的元素（例如"noSlideUp"）上调用它，然后根据需要将该类添加到元素中。所以你的mouseleave处理程序看起来像这样：

$("#Label2").mouseleave(function(){
    $("#Label1").not(".noSlideUp").slideUp(130);
});

...然后在其他地方阻止slideUp "#Label1"你要这样做：

$("#Label1").addClass("noSlideUp");

...如果您以后想要在该元素上重新启用slideUp，则会再次删除该类：

$("#Label1").removeClass("noSlideUp");

这个概念有点笨拙，因为你必须在调用.not(".noSlideUp")的地方加入.slideUp()，但它会做你想要的。

防止所有slideUp函数仅在一个元素上触发

1 个答案: