jquery onclick 切换最接近的 UL

jquery onclick toggle nearest UL

本文关键字：UL 最接近 onclick jquery      更新时间：2023-09-26

试图使用 jQuery 切换最近的 #dropdown 元素，我似乎找不到 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>

jQuery代码是：

  function showDropDown() {
    jQuery(this).parents("li").find("ul").toggleClass('show');
  }

dropdown ul 是 filter-button li 的子元素。所以你不需要在这里找到父母

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

或

如果你真的需要使用内联方法调用，那么你也需要传递当前对象，

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

法典

function showDropDown(obj) {
  jQuery(obj).find("ul").toggleClass('show');
}
如果有很多

UL元素作为子级和next兄弟姐妹，则必须如下编写。

演示 ： https://jsfiddle.net/nigayo/Lo3yf31y/1/

[JavaScript]

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

[网页]

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

您在method调用中缺少this对象。

请参阅此处的演示。

请在下面找到代码：

.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>

.JS：

function showDropDown(obj) {
  $(obj).find("ul").toggle();
}
相关文章：