Question

我有一些代码充当无序列表下拉菜单。它显示和隐藏得很好，但我试图弄清楚如何在存在嵌套子列表的情况下将活动状态添加到单击的父元素。下面的代码似乎将活动状态添加到任何被点击的链接，无论它是否有孩子，但我不希望这样。

例如，我想在点击它时为“In the News”添加一个活动状态。

请有人帮帮我吗？

我的jQuery：

$('.infobox.lightbox.inlinks ul > li > ul')
 .hide()
 .click(function(e){
   e.stopPropagation();
 });

 $('.infobox.lightbox.inlinks ul > li').toggle(function(){
   $(this).find('ul').slideDown(),
   $(this).addClass("expanded");
 }, function(){
   $(this).find('ul').slideUp(),
   $(this).removeClass("expanded");
 });

和我的HTML：

<ul>
    <li><a href="#">Press releases</a></li>
    <li><a href="#">In the news</a>
        <ul>
          <li><a href="#">Photo galleries</a></li>
          <li><a href="#">Videos</a></li>
          <li><a href="#">Podcasts</a></li>
        </ul>
    </li>
    <li><a href="#">Media Centre</a></li>
    <li><a href="#">Fact Sheet</a></li>
    <li><a href="#">Press Contacts</a></li>
</ul>

Answer 1

JQuery's .toggle()用于隐藏/显示元素，而不是在函数之间“切换”。

你想做什么这样的事情（尽管还有很多其他方法可以解决这个问题）：

JAVASCRIPT：

$('.infobox.lightbox.inlinks ul > li').click(function(e){
     if($(this).children('ul').length>0){
         e.preventDefault();
         if($(this).children('ul').is(':visible')){
           $(this).find('ul').slideUp(),
           $(this).removeClass("expanded");
         }else{
           $(this).find('ul').slideDown(),
           $(this).addClass("expanded"); 
         }
     }
 });

DEMO：http://jsfiddle.net/dirtyd77/aZBXc/6/

希望这有帮助！

Answer 2

使用此html ...

<div class="infobox lightbox inlinks">
    <ul>
        <li><a href="#">Press releases</a></li>
        <li><a href="#">In the news</a>
            <ul style="display:none;">
              <li><a href="#">Photo galleries</a></li>
              <li><a href="#">Videos</a></li>
              <li><a href="#">Podcasts</a></li>
            </ul>
        </li>
        <li><a href="#">Media Centre</a></li>
        <li><a href="#">Fact Sheet</a></li>
        <li><a href="#">Press Contacts</a></li>
    </ul>
</div>

和JS ......

$('.infobox.lightbox.inlinks ul > li').click(function(e){
    e.stopPropagation();
    $(this).find('ul').slideToggle(),
});

不使用jQuery就绪...使用jQuery on事件...

请参阅此jSfiddle Example

Jquery扩展ul列表活动状态

2 个答案: