jQuery 每个 toggleClass 并追加

Question

我想为主要类别制作一个下拉列表。

html

<ul class="product-categories">
 <li class="cat-item cat-item-16 cat-parent"><a href="#">Clothing</a>
 <ul class="children">
   <li class="cat-item cat-item-19"><a href="#">Accessories</a></li>
   <li class="cat-item cat-item-18"><a href="#">Hoodies</a></li>
   <li class="cat-item cat-item-17"><a href="#">Tshirts</a></li>
  </ul>
 </li>


 <li class="cat-item cat-item-15 cat-parent"><a href="#">Uncategorized</a>
  <ul class="children">
    <li class="cat-item cat-item-39"><a href="#">Example</a></li>
    <li class="cat-item cat-item-40"><a href="#">example2</a></li>
  </ul>
 </li>
</ul>

CSS

ul.children {
    display: none; 
}
ul.children.ok {
    display: block; 
}

jQuery

$(document).ready(function(){
  $('.cat-parent').each( function( index, element ){
    $(this).append("<span style='float:right;cursor:pointer' class='show'>&#8595;</span>");
    $(this).click(function() {
        $(this).find('ul.children').toggleClass('ok');
    });
  });
});

但是我想做的不是点击分类的时候，而是在右边创建了一个箭头跨度，点击了，但是做不出来，我哪里错了？

您可以查看下面提供的演示。

https://jsfiddle.net/justfeel/k5qa6j21/8/

Answer 1

您的问题是，当您使用 .append 时，它出现在子 ul 和 ul 的 li 元素之后，因此向下移动当你展开时。

当您使用 float:right 时，您可以将箭头放在和 ul 之前，它会出现在正确的位置，然后不会移动。

$(this).prepend("<span

更新的代码段（和 jsfiddle）：

$(document).ready(function() {
  $('.cat-parent').each(function(index, element) {
    $(this).prepend("<span style='float:right;cursor:pointer' class='show'>&#8595;</span>");
    $(this).click(function() {
      $(this).find('ul.children').toggleClass('ok');
    });
  });
});

ul.children {
  display: none;
}

ul.children.ok {
  display: block;
}

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

<ul class="product-categories">
  <li class="cat-item cat-item-16 cat-parent"><a href="#">Clothing</a>
    <ul class="children">
      <li class="cat-item cat-item-19"><a href="#">Accessories</a></li>
      <li class="cat-item cat-item-18"><a href="#">Hoodies</a></li>
      <li class="cat-item cat-item-17"><a href="#">Tshirts</a></li>
    </ul>
  </li>


  <li class="cat-item cat-item-15 cat-parent"><a href="#">Uncategorized</a>
    <ul class="children">
      <li class="cat-item cat-item-39"><a href="#">Example</a></li>
      <li class="cat-item cat-item-40"><a href="#">example2</a></li>
    </ul>
  </li>
</ul>

请注意，您不需要每个 .each（对于提供的代码），因为 jquery 的 many/most 操作对整个集合起作用：

$(document).ready(function() {
  $('.cat-parent')
    .prepend("<span style='float:right;cursor:pointer' class='show'>&#8595;</span>")
    .click(function() {
        $(this).find('ul.children').toggleClass('ok');
    });
});

ul.children {
  display: none;
}

ul.children.ok {
  display: block;
}

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

<ul class="product-categories">
  <li class="cat-item cat-item-16 cat-parent"><a href="#">Clothing</a>
    <ul class="children">
      <li class="cat-item cat-item-19"><a href="#">Accessories</a></li>
      <li class="cat-item cat-item-18"><a href="#">Hoodies</a></li>
      <li class="cat-item cat-item-17"><a href="#">Tshirts</a></li>
    </ul>
  </li>


  <li class="cat-item cat-item-15 cat-parent"><a href="#">Uncategorized</a>
    <ul class="children">
      <li class="cat-item cat-item-39"><a href="#">Example</a></li>
      <li class="cat-item cat-item-40"><a href="#">example2</a></li>
    </ul>
  </li>
</ul>

jQuery 每个 toggleClass 并追加

jQuery each toggleClass and append

jquery

drop-down-menu