JQuery/JS 选择特定元素

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-name ”时，我想选择“ .category-dropdown ”。最好使用“(this)”，以便保留可变性。

Answer 1

你至少有两个选择：

1. 使用$(this).next()，因为它是下一个元素，或者

2. 使用$(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>