当不透明度为零时，下拉列表项仍可单击 [英] Drop down list items still clickable when the opacity is zero

问题描述

问题是，当不透明度设置为零时，下拉按钮仍可单击.我将不透明度设置为零，因为需要褪色效果.是否有其他方法可以使动画以及内容被jquery隐藏?

The issue is that the drop-down button is still clickable when the opacity is set to zero. I am setting the opacity to zero because in need the fading effect. Is there any alternative to get an animation, as well as the content, is hidden by jquery?

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

You can see in the example when we hover below the button the cursor turns into a pointer and the elements are clickable.

尝试这样做但从未成功

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

推荐答案

问题是因为当您将opacity设置为0时，这些元素仍位于DOM中，并且尽管存在事实仍可以与之交互无法看到它们-与visibility: none相似.

The problem is because when you set opacity to 0, the elements are still in the DOM, and can still be interacted with, despite the fact they cannot be seen - similar to visibility: none.

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

To fix this you should use display: none. You can also simplify the logic by using a combination of fadeToggle() and fadeOut(), like this:

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

这篇关于当不透明度为零时，下拉列表项仍可单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！