Question

我想用jQuery选择一个特殊元素。我已经尝试了很多东西。我希望有人能帮助我。

$(document).ready(function() {
  open = false;
});

// Rotate the dropdown button on click
$(".category-name").click(function() {
  if (open == false) {
    $(this).find(".fa-caret-down").fadeOut("fast");
    $(this).find(".fa-caret-up").fadeIn("fast");
    $(this).prev("li").find(".category-dropdown1").slideDown("fast");
    open = true;
  } else {
    $(this).find(".fa-caret-down").fadeIn("fast");
    $(this).find(".fa-caret-up").fadeOut("fast");
    $(this).prev("li").find(".category-dropdown1").slideUp("fast");
    open = false;
  }
})

<ul class="sortable">
  <li class="category">
    <a class="category-name d-flex">Favoriten <i class="fas fa-caret-down"></i><i class="fas fa-caret-up"></i></a>
    <ul class="category-dropdown">
        <li class="category-animation d-flex"><a href="#">Animation1</a></li>
        <li class="category-animation d-flex"><a href="#">Animation1</a></li>
    </ul>
  </li>
  <li class="category">
    <a class="category-name d-flex">Tanzen <i class="fas fa-caret-down"></i><i class="fas fa-caret-up"></i></a>
    <ul class="category-dropdown">
        <li class="category-animation d-flex"><a href="#">Animation1</a></li>
        <li class="category-animation d-flex"><a href="#">Animation1</a></li>
    </ul>
  </li>                     
    </ul>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

当我单击“ 。类别名称”时，我想选择“ .category-下拉列表”。最好使用“（this）”，以便保留可变性。

Answer 1

您至少有两个选择：

使用$(this).next()，因为它是下一个元素，或者
使用$(this).parent().find(".category-dropdown")使代码在面对HTML结构更改时更具弹性

这里是＃1的示例：

$(".category-name").on("click", function() {
    $(".highlight").removeClass("highlight");
    $(this).next().addClass("highlight");
});

.highlight {
    background-color: #ffff9a;
 }

<ul class="sortable">
  <li class="category">
      <a class="category-name d-flex">Favoriten <i class="fas fa-caret-down"></i><i class="fas fa-caret-up"></i></a>
      <ul class="category-dropdown">
          <li class="category-animation d-flex"><a href="#">Animation1</a></li>
          <li class="category-animation d-flex"><a href="#">Animation1</a></li>
      </ul>
  </li>
  <li class="category">
      <a class="category-name d-flex">Tanzen <i class="fas fa-caret-down"></i><i class="fas fa-caret-up"></i></a>
      <ul class="category-dropdown">
          <li class="category-animation d-flex"><a href="#">Animation1</a></li>
          <li class="category-animation d-flex"><a href="#">Animation1</a></li>
      </ul>
  </li>                   
</ul>

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

这里是＃2的示例：

$(".category-name").on("click", function() {
    $(".highlight").removeClass("highlight");
    $(this).parent().find(".category-dropdown").addClass("highlight");
});

.highlight {
    background-color: #ffff9a;
 }

<ul class="sortable">
  <li class="category">
      <a class="category-name d-flex">Favoriten <i class="fas fa-caret-down"></i><i class="fas fa-caret-up"></i></a>
      <ul class="category-dropdown">
          <li class="category-animation d-flex"><a href="#">Animation1</a></li>
          <li class="category-animation d-flex"><a href="#">Animation1</a></li>
      </ul>
  </li>
  <li class="category">
      <a class="category-name d-flex">Tanzen <i class="fas fa-caret-down"></i><i class="fas fa-caret-up"></i></a>
      <ul class="category-dropdown">
          <li class="category-animation d-flex"><a href="#">Animation1</a></li>
          <li class="category-animation d-flex"><a href="#">Animation1</a></li>
      </ul>
  </li>                   
</ul>

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

jQuery / JS选择特定元素

1 个答案: