Rajendran Nadar Rajendran Nadar - 28 days ago 8
CSS Question

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 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.

Tried doing this but never worked



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

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: 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>