多次使用css类时切换特定元素

Question

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>

Answer 1

You should toggle the class for the wrapper in the same parent element because the class selector select all the elements with the same class in the page:

$(document).ready(function(){
  $('.trigger-dropdown').on('click', function(){
    $(this).parent().find('.filter-dropdown-wrapper').toggleClass('filter-dropdown-active');
    return false;
  });
});