如何使用jQuery切换指定要显示的无序列表

Question

Hello I am trying to use the jQuery toggle function just to change a ul display state from:

display: none;

to

display: block;

and this works however I am receiving the information from the database and with jQuery toggle it is showing all of the information not specifically from category id in which i click on

Here's what I have so far:

<section id="categories-wrapper">
  <div class="cat-center">
    <?php foreach($categories as $cat) { ?>
    <?php if($cat['parent_id'] < 1) { ?>
    <li>
      <a href="#!"><img src="media/categories/<?php echo $cat['image']; ?>"></a>
      <ul>
        <?php
$childCategories = $objCatalogue->getChildCategories($cat['id']);
?>
        <?php foreach($childCategories as $childCat) { ?>
        <li><?php echo $childCat['name']; ?></li>
        <?php } ?>
      </ul>
    </li>
    <?php } ?>
    <?php } ?>
  </div>
</section>

the js code:

$('.cat-center li').click(function() {
    event.stopPropagation();
    $('.cat-center li ul').toggle('blind');
});

Now with the jQuery toggle when i click on the first link it shows the information from the other link as well, but with CSS using the hover command to just change display to block it works. Could someone please advise on what I am doing wrong.

</div>

Answer 1

Try changing your $('.cat-center li ul').toggle('blind');

to

$('.cat-center li').click(function() {
    event.stopPropagation();
    if ($(this).find('ul').is(":visible"))
    {
        $(this).find('ul').hide(500);
    }
    else
    {
      $('.cat-center li ul').hide(500);
      $(this).find('ul').toggle('blind');
    }
});

https://jsfiddle.net/m6jLo547/