如果任何子元素具有某個類，則將類添加到父div，否則將其刪除（jQuery或Javascript）

Question

我有多個下拉菜單，每個下拉菜單都具有多個樣式為復選框的按鈕。 單擊其中一個按鈕時，它將獲得“活動”類。 我想做的是，如果任何子元素（按鈕）具有活動類（使用jQuery或Javascript），則將“活動”類添加到父下拉列表中。

的HTML

<div class="dropdown dropdown-checkboxes">
    <div class="dropdown-toggle">Brand</div>
    <div class="dropdown-menu" data-filter-group="brand">
        <button class="control-condition custom-checkbox" data-toggle=".volvo"><span class="checkmark"></span>Volvo</button>
        <button class="control-condition custom-checkbox" data-toggle=".bmw"><span class="checkmark"></span>BMW</button>
        <button class="control-condition custom-checkbox" data-toggle=".fiat"><span class="checkmark"></span>Fiat</button>
        ...
    </div>
</div>

我嘗試過的

$(".control-condition").click(function () {
    if ($('.dropdown-menu:has(.active)')) {
        $(this).parent().parent().addClass('active');
    }
    else {
        $(this).parent().parent().removeClass('active');
    }
});

這會像應有的那樣將類“活動”添加到父級下拉列表中，但是當按鈕“未選中”時（不會激活類），它不會刪除該類。

任何建議或指導將不勝感激！ :)

Answer 1

問題是$('.dropdown-menu:has(.active)')始終為true ，您必須將支票更改為以下內容：

if ($('.dropdown-menu:has(.active)').length) { ... }

但是在這種情況下，使用.toggleClass更合適，這是一個示例：

$(this).parent().parent().toggleClass('active', !!$('.dropdown-menu:has(.active)').length);

Answer 2

您可以使用.hasClass()

$(".control-condition").click(function () {
    if (!$('.dropdown-menu').hasClass("active")) {
        $(this).parent().addClass('active');
    }
    else {
        $(this).parent().removeClass('active');
    }
});

但是請注意，您的邏輯存在問題。 您檢查.dropdown-menu是否具有active的類，但是由於此$(this).parent().parent().addClass('active');而在dropdown-checkboxes上設置了active類$(this).parent().parent().addClass('active');

因此，要么更改$(this).parent().parent().addClass('active'); 到$(this).parent().addClass('active');
或將$('.dropdown-menu').hasClass("active")更改$('.dropdown-checkboxes').hasClass("active")

演示版

 $(".control-condition").click(function () { if (!$('.dropdown-menu').hasClass("active")) { $(this).parent().addClass('active'); } else { $(this).parent().removeClass('active'); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="dropdown dropdown-checkboxes"> <div class="dropdown-toggle">Brand</div> <div class="dropdown-menu" data-filter-group="brand"> <button class="control-condition custom-checkbox" data-toggle=".volvo"><span class="checkmark"></span>Volvo</button> <button class="control-condition custom-checkbox" data-toggle=".bmw"><span class="checkmark"></span>BMW</button> <button class="control-condition custom-checkbox" data-toggle=".fiat"><span class="checkmark"></span>Fiat</button> </div> </div> 

Answer 3

$('.dropdown').on('click', '.control-condition', function() {
  const parent = $(this).closest('.dropdown-menu');
  parent.toggleClass(
    'active',
    $('.control-condition.active', parent).is('.control-condition.active')
  );
})

如果要在.dropdown上使用active類， .dropdown .dropdown-menu更改為.dropdown 。

這將跨瀏覽器在.dropdown-menu所有當前和將來子級上.dropdown-menu （因為它綁定到下拉列表）。

如果您想要適用於當前的東西以及尚未在DOM中添加的任何.dropdown第一行更改為：

 $('body').on('click', '.dropdown .control-condition', function() {

關於事件委派的注意事項：將大量事件委派給'body'可以並且將影響頁面性能。 不要頻繁地委派給'body'事件，例如scroll或mousemove 。 閱讀有關事件性能的更多信息。

Answer 4

您可以使用dropdown類迭代所有元素，如果它具有一些活動元素，則將其激活（首先從父級移除所有活動類，否則將被復制）：

$(".control-condition").click(function () {
  $( "dropdown-menu" ).each(function( index ) {
     var element = $(this)
     // first we remove the class in case it already exist
     element.removeClass('active')
     // then we check if element with class active exist inside the menu
     if(element.find('.active').length == 1){
       element.addClass('active')
     }
  });
});

Answer 5

我會使用香草Javascript，在99.99％的情況下。

 const buttons = [...document.querySelectorAll('.dropdown-checkboxes .control-condition')]; document.querySelector('.dropdown-checkboxes') .addEventListener('click', ({target}) => { if (buttons.includes(target.closest('button'))) { target.closest('button').classList.toggle('active'); target .closest('.dropdown') // get the parent you need .classList[buttons.some(btn => btn.classList.contains('active')) // if any button has class active ? 'add' // add .active : 'remove' // otherwise remove .active ] ('active'); } } ) 

 .checkmark::before { content: '✓'; opacity: 0; transition: opacity .2s ease-out; } button.active>.checkmark::before { opacity: 1; } .dropdown { transition: background-color .3s ease-in-out; } .dropdown.active { background-color: lightgreen; } 

 <div class="dropdown dropdown-checkboxes"> <div class="dropdown-toggle">Brand</div> <div class="dropdown-menu" data-filter-group="brand"> <button class="control-condition custom-checkbox" data-toggle=".volvo"><span class="checkmark"></span>Volvo</button> <button class="control-condition custom-checkbox" data-toggle=".bmw"><span class="checkmark"></span>BMW</button> <button class="control-condition custom-checkbox" data-toggle=".fiat"><span class="checkmark"></span>Fiat</button> </div> </div>