0

我有一些代码充当无序列表下拉菜单。它可以很好地显示和隐藏，但我正在尝试解决如何使其在嵌套子列表存在时向被单击的父元素添加活动状态。下面的代码似乎将活动状态添加到任何被点击的链接，无论它是否有孩子，但我不希望这样。

例如，我想在单击“新闻中”时为其添加活动状态。

请问有人可以帮我吗？

我的 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>
4

2 回答 2

0

JQuery.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"); 
         }
     }
 });

演示：http: //jsfiddle.net/dirtyd77/aZBXc/6/

希望这可以帮助！

于 2013-02-07T16:16:05.863 回答
0

使用这个 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准备好的...使用jQueryon事件...

请参阅此jSfiddle 示例

于 2013-02-07T16:27:34.013 回答