Jquery 当不透明度为零时，下拉列表项仍然可以单击

问题是，当不透明度设置为零时，下拉按钮仍然可以单击。我将不透明度设置为零，因为我需要淡入淡出效果。是否有其他方法可以获取jquery隐藏的动画以及内容

您可以在示例中看到，当我们将光标悬停在按钮下方时，光标会变成指针，并且元素可以单击

尝试过这样做，但从未奏效

$（“.btn”）。在（'click'，函数（e）{
e、 停止传播（）；
var child=$（this.sides（）；
如果（！child.hasClass（“可见”））{
儿童动画({
“不透明度”：1
}, 1000);
child.addClass（“可见”）；
}否则{
儿童动画({
“不透明度”：0
}, 1000);
child.removeClass（“可见”）；
}
});
$（文档）。在（'单击'）上，函数（e）{
$（“.visible”）.animate({
“不透明度”：0
}, 1000);
$（“.visible”）.removeClass（“visible”）；
});
.btn{
大纲：无；
边界：无；
填充：10px 20px；
光标：指针；
背景色：#eee；
颜色：#7b；
宽度：150px；
盒影：4px4px6px0pxRGBA（0,0,0,16）；
字体大小：粗体；
边缘底部：20px；
}
.下拉列表{
位置：相对位置；
显示：内联；
}
.btn下拉列表{
填充：0px；
边际：0px；
列表样式：无；
背景色：#fff；
位置：绝对位置；
左：0px；
顶部：30px；
盒影：4px4px6px0pxRGBA（0,0,0,16）；
最小宽度：200px；
边框：1px实心#ddd；
文本对齐：首字母；
最大高度：210像素；
溢出：自动；
不透明度：0；
z指数：100；
}
.btn下拉列表li{
填充：6px；
边际：0px；
边框底部：1px实心#ddd；
光标：指针；
}
.btn下拉列表li:悬停{
背景色：#ddd；
}
.btn下拉列表李：最后一个孩子{
边框底部：无；
}

挑选

首先
第二
第三
第四

挑选

黑色的
棕色的
红色的
橙色的

问题在于，当您将
不透明度设置为
0
时，元素仍然在DOM中，并且仍然可以与之交互，尽管事实上它们看不到-类似于
可见性：none

要解决此问题，应使用
display:none
。您还可以通过组合使用
fadeToggle（）
和
fadeOut（）
来简化逻辑，如下所示：


$（“.btn”）。在（'click'，函数（e）{
e、 停止传播（）；
var$dropdown=$（this）.sides（）.fadeToggle（）；//切换此下拉列表
$（'.dropdown.btn dropdown'）.not（$dropdown.fadeOut（）；//隐藏其他下拉列表
});
$（文档）。在（'单击'）上，函数（e）{
$（'.dropdown.btn dropdown'）.fadeOut（）；//隐藏所有下拉列表
});
.btn{
大纲：无；
边界：无；
填充：10px 20px；
光标：指针；
背景色：#eee；
颜色：#7b；
宽度：150px；
盒影：4px4px6px0pxRGBA（0,0,0,16）；
字体大小：粗体；
边缘底部：20px；
}
.下拉列表{
位置：相对位置；
显示：内联；
}
.btn下拉列表{
填充：0px；
边际：0px；
列表样式：无；
背景色：#fff；
位置：绝对位置；
左：0px；
顶部：30px；
盒影：4px4px6px0pxRGBA（0,0,0,16）；
最小宽度：200px；
边框：1px实心#ddd；
文本对齐：首字母；
最大高度：210像素；
溢出：自动；
显示：无；
z指数：100；
}
.btn下拉列表li{
填充：6px；
边际：0px；
边框底部：1px实心#ddd；
光标：指针；
}
.btn下拉列表li:悬停{
背景色：#ddd；
}
.btn下拉列表李：最后一个孩子{
边框底部：无；
}

挑选

首先
第二
第三
第四

挑选

黑色的
棕色的
红色的
橙色的

尝试fadeIn和fadeOut，而不是像fadeIn和fadeOut这样的方法不使用子变量IDK为什么？但是处理$（“.visible”）不要忘记在.btn下拉菜单上用“display:none”替换“opacity:0”，谢谢，@vnt我忘了这么做。
display:none
会从DOM中删除元素吗？不会。它只是以一种无法与之交互的方式隐藏了元素。这是
显示
和
可见性
/
不透明度
之间的主要区别。好的，谢谢，@Rory McCrossan，你让代码更容易理解。尽管问题已经解决，但我很好奇，为什么像fadeIn和fadeOut这样的方法在我的代码中不适用于子变量？你能解释一下为什么会发生这种情况吗？它应该工作得很好-这基本上就是我的代码所做的。我只能猜测这个问题在某种程度上与逻辑有关。