I have developed my own dropdown module, which works fine so far. However, I have the problem that dropdowns that have the same trigger class open when clicked. How can I focus only on the element that was clicked. I also tried to focus the element using $(this).find
, but unfortunately this does not work for me. What exactly am I doing wrong?
$(document).ready(function(){
$('.trigger-dropdown').on('click', function(){
$('.filter-dropdown-wrapper').toggleClass('filter-dropdown-active');
return false;
});
});
$(document).click(function(){
if($('.filter-dropdown-wrapper').hasClass('filter-dropdown-active')) {
$('.filter-dropdown-wrapper').toggleClass('filter-dropdown-active');
}
});
$('.filter-dropdown-wrapper').click(function(event){
event.stopPropagation();
});
/* Triggers Checkbox Icon for Dropdowns */
$(".dropdown-items").click(function() {
$(this).find('.checkbox').toggleClass("checkbox-selected");
});
.sidebar-filter-wrapper{
padding-top:1.25rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.filter-dropdown{
position: relative;
}
.filter-label{
font-size: .875rem;
line-height: 1.375em;
border: 1px solid #E2E2E2;
border-radius: 50px;
padding: 0.5rem 1.25rem;
position: relative;
cursor: pointer;
transition: background-color ease 250ms;
}
.filter-label:hover{
background-color: rgba(226, 226, 226, 0.20);
color: #303030;
}
.filter-label img{
margin-left: .625rem;
}
.filter-dropdown-wrapper{
margin-top:.625rem;
display: none;
border-radius: 5px;
border: 1px solid #e2e2e2;
background-color: #fff;
padding: 1.25rem;
position: absolute;
top: 2.5rem,;
left: 0;
}
.filter-dropdown-active{
display:flex;
flex-direction: column;
}
.dropdown-items{
font-size: .875rem;
line-height: 1.375em;
margin-bottom: 0.625rem;
display: flex;
align-items: center;
}
.dropdown-items:last-child{
margin-bottom: 0;
}
.checkbox{
width: 18px;
height: 18px;
border: 1px solid #E2E2E2;
border-radius: 5px;
margin-right: 0.625rem;
}
.checkbox-selected{
background-color: #BC9590;
width: 18px;
height: 18px;
border-color: #bc9590;
background-image: url(../img/checked.svg);
background-repeat: no-repeat;
background-position: center center;
}
<div class="sidebar-filter-wrapper">
<div class="filter-pill-wrapper">
<div class="filter-dropdown">
<a class="filter-label trigger-dropdown">
Marken vor Ort
<img src="img/toggle.svg">
</a>
<div class="filter-dropdown-wrapper">
<a href="#" class="dropdown-items">
<div class="checkbox"></div>
<p>Skinceuticals</p>
</a>
<a href="#" class="dropdown-items">
<div class="checkbox"></div>
<p>Babor</p>
</a>
<a href="#" class="dropdown-items">
<div class="checkbox"></div>
<p>Eucerin</p>
</a>
<a href="#" class="dropdown-items">
<div class="checkbox"></div>
<p>Hermés</p>
</a>
<a href="#" class="dropdown-items">
<div class="checkbox"></div>
<p>Kérastase</p>
</a>
<a href="#" class="dropdown-items">
<div class="checkbox"></div>
<p>Clinique</p>
</a>
</div>
</div>
</div>
<div class="filter-pill-wrapper">
<div class="filter-dropdown">
<a class="filter-label trigger-dropdown">
Marken vor Ort
<img src="img/toggle.svg">
</a>
<div class="filter-dropdown-wrapper">
<a href="#" class="dropdown-items">
<div class="checkbox"></div>
<p>Skinceuticals</p>
</a>
<a href="#" class="dropdown-items">
<div class="checkbox"></div>
<p>Babor</p>
</a>
<a href="#" class="dropdown-items">
<div class="checkbox"></div>
<p>Eucerin</p>
</a>
<a href="#" class="dropdown-items">
<div class="checkbox"></div>
<p>Hermés</p>
</a>
<a href="#" class="dropdown-items">
<div class="checkbox"></div>
<p>Kérastase</p>
</a>
<a href="#" class="dropdown-items">
<div class="checkbox"></div>
<p>Clinique</p>
</a>
</div>
</div>
</div>
</div>
Comments
Post a Comment