當不透明度爲零時，仍然可以點擊下拉列表項目

Question

問題是，當不透明度設置爲零時，下拉按鈕仍然可點擊。我將不透明度設置爲零，因爲需要淡化效果。有沒有其他選擇來獲取動畫，以及內容，被jQuery隱藏？

您可以在示例中看到，當我們將鼠標懸停在按鈕下方時，光標變爲指針並且元素可點擊。

試過這樣做，但從未工作

$(".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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="dropdown"> 
 
    <button class="btn first">Select something</button> 
 
    <ul class="btn-dropdown"> 
 
    <li>First</li> 
 
    <li>Second</li> 
 
    <li>Third</li> 
 
    <li>Fourth</li> 
 
    </ul> 
 
</div> 
 

 
<div class="dropdown"> 
 
    <button class="btn first">Select something</button> 
 
    <ul class="btn-dropdown"> 
 
    <li>Black</li> 
 
    <li>Brown</li> 
 
    <li>Red</li> 
 
    <li>Orange</li> 
 
    </ul> 
 
</div>

Answer 1

的問題是，因爲當你設置opacity到0，元素仍然在DOM，並且仍可以與之交互，儘管他們無法看到的事實 - 類似於visibility: none。

要解決此問題，您應該使用display: none。您也可以通過使用fadeToggle()和​​組合，像這樣簡化的邏輯：

$(".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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="dropdown"> 
 
    <button class="btn first">Select something</button> 
 
    <ul class="btn-dropdown"> 
 
    <li>First</li> 
 
    <li>Second</li> 
 
    <li>Third</li> 
 
    <li>Fourth</li> 
 
    </ul> 
 
</div> 
 

 
<div class="dropdown"> 
 
    <button class="btn first">Select something</button> 
 
    <ul class="btn-dropdown"> 
 
    <li>Black</li> 
 
    <li>Brown</li> 
 
    <li>Red</li> 
 
    <li>Orange</li> 
 
    </ul> 
 
</div>