在触发器及其关联文本（兄弟）上切换类

Question

我正在尝试使用复选框创建自己的多选下拉菜单。工作得很好，到目前为止，我唯一的问题是，触发复选框矩形设计的类 .checkbox-selected 仅在我单击复选框时触发，而不是在右侧的文本上触发它，或一般的链接。

我怎样才能做到，触发也是通过点击链接或文本来设置的？

$(document).ready(function(e) {
  $(".dropdown-items .checkbox").click(function() {
    $(this).toggleClass("checkbox-selected");
  });
});

.dropdown-items {
  font-size: .875rem;
  line-height: 1.375em;
  margin-bottom: 0.625rem;
  display: flex;
  align-items: center;
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="dropdown-items">
  <div class="checkbox"></div>
  <p>demo</p>
</a>
<a href="#" class="dropdown-items">
  <div class="checkbox"></div>
  <p>demo</p>
</a>

---

更新：（有多个下拉菜单）

$(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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<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

您只需要将事件侦听器绑定到包含锚标记并在处理程序中使用find() 选择.checkbox：

$(".dropdown-items").click(function() {
  $(this).find('.checkbox').toggleClass("checkbox-selected");
});

工作示例：

$(document).ready(function(e) {
  $(".dropdown-items").click(function() {
    $(this).find('.checkbox').toggleClass("checkbox-selected");
  });
});

.dropdown-items {
  font-size: .875rem;
  line-height: 1.375em;
  margin-bottom: 0.625rem;
  display: flex;
  align-items: center;
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="dropdown-items">
  <div class="checkbox"></div>
  <p>demo</p>
</a>
<a href="#" class="dropdown-items">
  <div class="checkbox"></div>
  <p>demo</p>
</a>

---

（参考您更新的问题）

触发点击处理程序：

您正在切换所有.filter-dropdown-wrappers 的类。相反，您应该只选择关联的下拉菜单并切换其类。要实现这一点，您可以使用$(this) 作为点击的触发器，使用siblings() 方法来查找关联的下拉菜单。

$(this).siblings('.filter-dropdown-wrapper')

要关闭其他活动下拉菜单，如果关联的下拉菜单在变量中处于活动状态，您可以先保存状态。

let active_dropdown = $(this).siblings('.filter-dropdown-wrapper').hasClass('filter-dropdown-active');

然后您可以从所有包装器中删除 filter-dropdown-active 类，如果该类不活动，则将该类添加到关联的下拉列表中。

外部下拉点击：

如果您只是切换活动类，您还可以在关闭的下拉菜单中切换该类。因此，您应该简单地从所有下拉列表中删除该类（不需要if）。

工作示例：

我在$(document).ready(function() {...}); 中声明了所有事件侦听器，因为我找不到为什么只有触发点击侦听器应该在里面。

$(document).ready(function() {

  $('.trigger-dropdown').on('click', function() {
    let active_dropdown = $(this).siblings('.filter-dropdown-wrapper').hasClass('filter-dropdown-active');
    $('.filter-dropdown-wrapper').removeClass('filter-dropdown-active');
    if (!active_dropdown) {
      $(this).siblings('.filter-dropdown-wrapper').addClass('filter-dropdown-active');
    }
    return false;
  });

  $(document).click(function() {
    $('.filter-dropdown-wrapper').removeClass('filter-dropdown-active');
  });

  $('.filter-dropdown-wrapper').click(function(event) {
    event.stopPropagation();
  });

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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