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

问题是当不透明度设置为零时，下拉按钮仍然可以点击。 我将不透明度设置为零，因为需要褪色效果。 获取动画以及内容是否有任何替代方法被jquery隐藏？

您可以在示例中看到当我们将鼠标hover在按钮下方时，光标变为指针并且元素是可点击的。

尝试这样做但从未奏效

$(".btn").on('click', function(e) { e.stopPropagation(); var child = $(this).siblings(); if (!child.hasClass("visible")) { child.animate({ 'opacity': 1 }, 1000); child.addClass("visible"); } else { child.animate({ 'opacity': 0 }, 1000); child.removeClass("visible"); } }); $(document).on('click', function(e) { $(".visible").animate({ 'opacity': 0 }, 1000); $(".visible").removeClass("visible"); }); 

 .btn { outline: none; border: none; padding: 10px 20px; cursor: pointer; background-color: #eee; color: #7b7b7b; width: 150px; box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, .16); font-weight: bold; margin-bottom: 20px; } .dropdown { position: relative; display: inline; } .btn-dropdown { padding: 0px; margin: 0px; list-style: none; background-color: #fff; position: absolute; left: 0px; top: 30px; box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, .16); min-width: 200px; border: 1px solid #ddd; text-align: initial; max-height: 210px; overflow: auto; opacity: 0; z-index: 100; } .btn-dropdown li { padding: 6px; margin: 0px; border-bottom: 1px solid #ddd; cursor: pointer; } .btn-dropdown li:hover { background-color: #ddd; } .btn-dropdown li:last-child { border-bottom: none; } 

  
 Select something 
 
First
 
Second
 
Third
 
Fourth
 
 
 
 Select something 
 
Black
 
Brown
 
Red
 
Orange
 
  

Answer 1

问题是因为当你将opacity设置为0 ，元素仍然在DOM中，并且仍然可以与之交互，尽管它们无法被看到 – 类似于visibility: none 。

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

 $(".btn").on('click', function(e) { e.stopPropagation(); var $dropdown = $(this).siblings().fadeToggle(); // toggle this dropdown $('.dropdown .btn-dropdown').not($dropdown).fadeOut(); // hide other dropdowns }); $(document).on('click', function(e) { $('.dropdown .btn-dropdown').fadeOut(); // hide all dropdowns }); 

 .btn { outline: none; border: none; padding: 10px 20px; cursor: pointer; background-color: #eee; color: #7b7b7b; width: 150px; box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, .16); font-weight: bold; margin-bottom: 20px; } .dropdown { position: relative; display: inline; } .btn-dropdown { padding: 0px; margin: 0px; list-style: none; background-color: #fff; position: absolute; left: 0px; top: 30px; box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, .16); min-width: 200px; border: 1px solid #ddd; text-align: initial; max-height: 210px; overflow: auto; display: none; z-index: 100; } .btn-dropdown li { padding: 6px; margin: 0px; border-bottom: 1px solid #ddd; cursor: pointer; } .btn-dropdown li:hover { background-color: #ddd; } .btn-dropdown li:last-child { border-bottom: none; } 

  
 Select something 
 
First
 
Second
 
Third
 
Fourth
 
 
 
 Select something 
 
Black
 
Brown
 
Red
 
Orange