Jquery扩展ul列表活动状态

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

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

有人能帮帮我吗

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

用于隐藏/显示元素，而不是在函数之间“切换”

你想做什么（尽管还有很多其他方法）：

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

演示：

希望这有帮助

使用此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>

不要使用

jQuery

ready。。。在事件上使用jQuery

请参见此
从函数中声明一个
状态
变量。现在测试当前状态并将此变量更改为您需要的状态。很抱歉，这听起来不错，但我不确定如何进行编码-您能给出一个示例吗？嗨，Dom，这几乎可以正常工作，但当我单击列表中的ul链接时，页面会跳到顶部。有没有办法防止这种情况发生？这是因为
。在这种情况下，您需要使用
.preventDefault（）
。我修正了我最初的帖子。这应该会给你想要的结果。太棒了，非常感谢你。我添加了
$（.infobox.lightbox.inlinks ul”）.hide（）
在第一次点击页面时隐藏展开的框。你是救命恩人！没问题！还可以通过添加
display:none来隐藏展开的框到您的css，那么您就不需要
$（“.infobox.lightbox.inlinks ul”）.hide（）。如果您还有其他问题，请告诉我！感谢Dom，我决定使用JS来隐藏它们，而不是css，以防JS被关闭。那样的话，一切都应该显示出来
$('.infobox.lightbox.inlinks ul > li').click(function(e){
    e.stopPropagation();
    $(this).find('ul').slideToggle(),
});