drnycqxwz63508434
2016-12-07 10:13
浏览 77

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

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>

图片转代码服务由CSDN问答提供 功能建议

您好我试图使用jQuery切换功能只是为了改变ul显示状态: \ n

  display:none; 
   
 
 

to

  display:block; \  n   
 
 

这可行但是我从数据库接收信息并使用jQuery切换它显示的所有信息都不是特别来自我点击的类别ID < / p>

这是我到目前为止所做的:

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

js代码:

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

现在使用jQuery切换当我点击第一个链接时它也会显示来自其他链接的信息,但是使用hover命令将CSS更改为阻止它可以正常工作。 有人可以告诉我我做错了什么。

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • douzhang5984 2016-12-07 10:39
    已采纳

    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/

    已采纳该答案
    打赏 评论

相关推荐 更多相似问题