Javascript jquery onclick切换最近的UL

试图使用jQuery切换最近的#下拉元素，但我似乎找不到ul。jQuery加载良好，每个元素都确认单击

HTML代码是：

<li onclick="showDropDown()" class="filter-button">
                            Filter by <strong>Aread</strong> +
    <ul id="dropdown" class="dropdown-content">
      <li><a href="">Test 1</a></li>
      <li><a href="">Test 3</a></li>
      <li><a href="">Test 2</a></li>
    </ul>
</li>

---

下拉列表

ul是

filter按钮

li的子元素。所以你不需要在这里找到父母

$(".filter-button").click(function() {
  $(this).find("ul").toggleClass('show');
});

或者

如果确实需要使用内联方法调用，那么还需要传递当前对象

<li onclick="showDropDown(this)" class="filter-button">

---

下拉列表

ul是

filter按钮

li的子元素。所以你不需要在这里找到父母

$(".filter-button").click(function() {
  $(this).find("ul").toggleClass('show');
});

或者

如果确实需要使用内联方法调用，那么还需要传递当前对象

<li onclick="showDropDown(this)" class="filter-button">

---

如果有很多UL元素作为child和nextSibling，您必须按照下面的方式编写

演示：

[JavaScript]

      $(".filter-button").click(function() {
        $(this).find("ul:first").toggleClass('show');
        $(this).next("ul:first").toggleClass('show');
      });

[HTML]

  <li class="filter-button">
    Filter by <strong>Aread</strong> +
    <ul id="dropdown" class="dropdown-content">
      <li><a href="">Test 2</a></li>
    </ul>

    <ul id="dropdown2" class="dropdown-content">
      <li><a href="">Test 2</a></li>
    </ul>
  </li>

  <ul id="dropdown_next" class="dropdown-content">
      <li><a href="">Test 2</a></li>
  </ul>
  <ul id="dropdown_next2" class="dropdown-content">
    <li><a href="">Test 2</a></li>
  </ul>

按分区过滤+

如果有许多UL元素作为child和nextSibling，那么您必须按以下方式编写

演示：

[JavaScript]

      $(".filter-button").click(function() {
        $(this).find("ul:first").toggleClass('show');
        $(this).next("ul:first").toggleClass('show');
      });

[HTML]

  <li class="filter-button">
    Filter by <strong>Aread</strong> +
    <ul id="dropdown" class="dropdown-content">
      <li><a href="">Test 2</a></li>
    </ul>

    <ul id="dropdown2" class="dropdown-content">
      <li><a href="">Test 2</a></li>
    </ul>
  </li>

  <ul id="dropdown_next" class="dropdown-content">
      <li><a href="">Test 2</a></li>
  </ul>
  <ul id="dropdown_next2" class="dropdown-content">
    <li><a href="">Test 2</a></li>
  </ul>

按分区过滤+

您在

方法

调用中缺少

此

对象

请参阅演示

请查找以下代码：

HTML:

<ul>
  <li onclick="showDropDown(this)" class="filter-button">
    Filter by <strong>Aread</strong> +
    <ul id="dropdown" class="dropdown-content">
      <li><a href="">Test 1</a></li>
      <li><a href="">Test 3</a></li>
      <li><a href="">Test 2</a></li>
    </ul>
  </li>
</ul>

function showDropDown(obj) {
  $(obj).find("ul").toggle();
}

---

在

方法

调用中缺少

此

对象

请参阅演示

请查找以下代码：

HTML:

<ul>
  <li onclick="showDropDown(this)" class="filter-button">
    Filter by <strong>Aread</strong> +
    <ul id="dropdown" class="dropdown-content">
      <li><a href="">Test 1</a></li>
      <li><a href="">Test 3</a></li>
      <li><a href="">Test 2</a></li>
    </ul>
  </li>
</ul>

function showDropDown(obj) {
  $(obj).find("ul").toggle();
}

---

不需要

.parents（“li”）

您的点击事件已经在li中了。您需要的是在li中找到ul。尝试使用jQuery（此）。儿童而不是家长。我认为您的代码不完整，请尝试修改或更好地解释，您正在搜索$（此）.parents，但在你的html中没有li的UL父项#dropdown不需要

。parents（“li”）

你的点击事件已经在li中了，你所需要的就是在li中找到UL。试着使用jQuery（this）。孩子而不是家长。我认为你的代码不完整，试着编一把小提琴或更好地解释一下，你正在搜索$（this）.parents但在html中没有li#dropdownYes的UL父项。。完美的我正要提出同样的建议：）是的。。完美的我正要提出同样的建议：）