Question

尝试使用jQuery toggleClass最近的#dropdown元素，我似乎无法找到ul。 jQuery加载正常，每个元素都确认点击。

HTML代码是：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>


<div id="mypdf">
  <div>
    My Pdf Content Here
  </div>
</div>

jQuery代码是：

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

Answer 1

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

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

OR，

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

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

代码，

function showDropDown(obj) {
  jQuery(obj).find("ul").toggleClass('show');
}

Answer 2

您在this电话中缺少method个对象。

参阅演示here。

请找到以下代码：

<强> 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();
}

Answer 3

如果有许多UL元素作为child和nextSibling，则必须按如下所示编写。

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

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

jquery onclick切换最近的UL

3 个答案: