Drop Down List Items Still Clickable When The Opacity Is Zero

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 alternat

Solution 1:

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.

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: 10px20px;
  cursor: pointer;
  background-color: #eee;
  color: #7b7b7b;
  width: 150px;
  box-shadow: 4px4px6px0pxrgba(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: 4px4px6px0pxrgba(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-dropdownli {
  padding: 6px;
  margin: 0px;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}

.btn-dropdownli:hover {
  background-color: #ddd;
}

.btn-dropdownli:last-child {
  border-bottom: none;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="dropdown"><buttonclass="btn first">Select something</button><ulclass="btn-dropdown"><li>First</li><li>Second</li><li>Third</li><li>Fourth</li></ul></div><divclass="dropdown"><buttonclass="btn first">Select something</button><ulclass="btn-dropdown"><li>Black</li><li>Brown</li><li>Red</li><li>Orange</li></ul></div>