Javascript jQuery下拉切换查找活动li并保持下拉列表打开

我在使用自定义下拉开关时遇到了一些问题

菜单在HTML中看起来是这样的，我没有编辑代码的选项，所以我必须用css/jQuery解决它：

<ul>
    <li><a href="">Link"</a></li>   <-- when this is active it has class="active"
    <li><a href="">Link"</a></li>
    <li><a href="">Link"</a></li>
    <li class="">                   <-- this is always empty
        <span>Title</span>
        <ul>
            <li class="active"><a href="">Link</a></li>   <-- this is currently active
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
        </ul>
    </li>
</ul>

第一个实际运行良好的函数检查是否有带有

class=”“

的

li

，因为这表明它有一个子菜单。单击

li

中的

span

可切换类

菜单打开

，从而导致菜单打开或折叠

现在，当我在子菜单中的页面上时，我想保持菜单打开。如果在这种情况下，子

ul

中的

li

处于活动状态，则父

li

不处于活动状态

不幸的是，这不起作用。我也尝试过不同的方法，比如

hascalass

，

children

，但都不起作用。我指出这个问题主要是为了：

$(this).addClass("menu-open");

因为似乎从未找到

$（此）

。例如，如果我将$（this）更改为$（'body'），并添加一个hide（），我清楚地看到它是有效的，因为我得到一个空白页：）

任何关于这个问题的建议都将不胜感激，因为我现在几乎放弃了

$（函数（）{
$（'.menu li[class=”“]span'）。单击（函数（）{
const self=$（this.parent（）；
self.toggleClass（“菜单打开”）；
});
if（$（'.menu li[class=”“]）.find（'li.active'）.length！==0）{
$（此）.addClass（“菜单打开”）；
}
});
.menu{width:200px}
ul{列表样式类型：无}
li{背景：#ccc；边距：2px}
span{显示：块}
.menu li[class=”“]{
高度：20px；
溢出：隐藏；
光标：指针；
}
.菜单打开{
高度：自动；
溢出：可见；
光标：指针；
}






标题









标题







尝试使用JQuery提供的每个

操作符

是这样的：

$('.menu li').each(function() {
  if($(this).find('li.active').length !== 0) {
    $(this).addClass('menu-open');
  }
});

在您的情况下，使用

此

表达式的上下文并不表示您在

if

中尝试使用的选择器

---

在使用

each

的示例中，函数中的

this

表达式表示由选择器表示的正在交互的元素。

请包含一个可运行的代码。我在问题中添加了一个示例代码：）我注意到在编辑它之前，我也必须更改$（this）.addClass（'active'）。您的解决方案非常有效-非常感谢：）（感谢您解释原因！）

$('.menu li').each(function() {
  if($(this).find('li.active').length !== 0) {
    $(this).addClass('menu-open');
  }
});