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

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>

标签： jquerycsscheckbox

Answer 1

您只需要将事件侦听器绑定到包含锚标记并.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-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>