在触发器及其相关文本（同级）上切换 class

Question

我正在尝试创建我自己的带有复选框的多选下拉菜单。工作得很好，到目前为止，我唯一的问题是，触发复选框矩形设计的 class .checkbox-selected 仅在我单击复选框时触发，而不是在右边的文本，或者一般的 link。

如何实现，触发器也可以通过点击 link 或文本来设置？

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

您只需将事件侦听器绑定到包含的锚标记和 select 处理程序中的 .checkbox find():

$(".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-wrapper 的 class。相反，您应该只 select 关联的下拉菜单并切换其 class。为此，您可以使用 $(this) 作为点击触发器，使用 siblings() 方法查找相关的下拉菜单。

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

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

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

然后您可以从所有包装器中删除 filter-dropdown-active class 并将 class 添加到关联的下拉列表中（如果它未处于活动状态）。

外下拉点击：

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

工作示例：

我在 $(document).ready(function() {...}); 中声明了所有事件侦听器，因为我没有发现为什么只有 trigger-click-listener 应该在里面。

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

在触发器及其相关文本（同级）上切换 class

Toggle class on trigger and on its associated text (sibling)

css

checkbox

jquery