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

Question

您好，我正在尝试使用 jQuery 切换功能来更改 ul 显示状态:

display: none;

到

display: block;

这是可行的，但是我从数据库接收信息，并且使用 jQuery 切换显示所有信息，而不是我单击的类别 ID 中的特定信息

这是我目前所拥有的:

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

js代码:

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

现在使用 jQuery 切换，当我单击第一个链接时，它也会显示来自另一个链接的信息，但是使用 CSS 使用悬停命令来更改显示以阻止它工作。有人可以就我做错了什么提出建议。

Answer 1

尝试更改您的 $('.cat-center li ul').toggle('blind');

到

$('.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/