jQuery each toggleClass and append-CodePudding

I wanted to make a dropdown for the main Categories.

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');
    });
  });
});

But I wanted to do this not when I clicked on the categories, but when I created an arrow span on the right and clicked on it, but I couldn't do it, where am I going wrong?

You can check the demo available below.

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

CodePudding user response：

Your issue is that when you use .append it appears after the children ul and the ul's li elements, so moves down when you expand.

As you're using float:right you can put your arrow before the ul and it will appear in the correct place and then not move.

$(this).prepend("<span

Updated snippet (and 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>

Note that you don't need to each .each (for the code provided) as many/most of jquery's operations work on the entire collection:

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