如何阻止JavaScript函数影响子元素？

我四处寻找这个问题的解决方案，但它太不可靠了，我怀疑很多人是否考虑过它。我最近作为web管理员继承的一个web应用程序在Drupal（版本6）上运行。不幸的是，我无法编辑Drupal安装或创建自定义主题，直到5月，因为必须首先处理的其他义务

首先，我意识到并衷心同意有更有效（和优雅）的方法来解决这个问题，但就目前而言，这是客户想要的，并且对实施感到满意

不管怎么说，这位老管理员使用Drupal来开发站点的导航。Drupal在HTML页面上吐出的代码是：

<ul class="menu">
<li class="expanded first"><a href="/" title="">Housing</a>
    <ul class="menu">
        <li class="leaf first"><a href="/housing_roster" title="" class="active">Housing Roster</a></li> 
        <li class="leaf"><a href="/my_floor" title="">My Floor</a></li> 
        <li class="leaf"><a href="/photoviewer" title="">Photo Viewer</a></li> 
        <li class="leaf last"><a href="/maintenance_viewer" title="">Building Maintenance</a></li> 
    </ul>
</li> 
<li class="expanded"><a href="/" title="">Reports</a>
    <ul class="menu">
        <li class="leaf first"><a href="/node/add/fr" title="">Build Floor Report</a></li> 
        <li class="leaf"><a href="/node/add/ir" title="">Submit Incident Report</a></li> 
        <li class="leaf last"><a href="/lockout" title="">Submit Lockout</a></li> 
    </ul>
</li> 
<li class="expanded"><a href="/" title="">Office</a>
    <ul class="menu">
        <li class="leaf first"><a href="/node/add/pack-in" title="">Check In Package</a></li> 
        <li class="leaf"><a href="/node/add/pack-out" title="">Check Out Building Package</a></li> 
        <li class="leaf"><a href="/node/add/package-out-all-blgds" title="">Check Out Campus Package</a></li> 
        <li class="leaf last"><a href="/node/add/equipment-out" title="">Check Equipment Out</a></li> 
    </ul>
</li> 
<li class="expanded"><a href="/" title="">Staff</a>
    <ul class="menu">
        <li class="leaf first"><a href="/node/add/preprogram" title="">Pre Programs</a></li> 
        <li class="leaf"><a href="/node/add/program" title="">Post Program</a></li> 
        <li class="leaf"><a href="/programs/semester" title="">Programming Database</a></li> 
        <li class="leaf last"><a href="/downloads" title="">Staff Downloads</a></li> 
    </ul>
</li> 
<li class="leaf"><a href="/users/twinchester">My account</a></li> 
<li class="leaf last"><a href="/logout">Log out</a></li> 

我对这个输出的最大关注是，有一个class属性为“menu”的ul元素嵌套在另一个class属性为“menu”的ul元素中

我正在编写的JavaScript函数的目标是

允许jQuery在单击具有“expanded”类的相应li元素时展开和折叠子ul元素

仅将类为“expanded”的li元素的href属性更改为“javascript:void（null）”，以便它们不会将用户重定向到任何页面

下面是我到目前为止所使用的JavaScript函数：

<script type="text/javascript"> 
    $(function() {
    //Hide the nested lists
        $('ul.menu li.expanded ul.menu').hide();
    //Change the destination of the header links
        $('ul.menu li.expanded a').attr("href", "javascript:void(null)");
    //Toggle the display of the nested lists
        $('ul.menu li.expanded a').click(function() {
                $(this).next().slideToggle('normal');
        });
    });
</script>

$（函数（）{
//隐藏嵌套列表
$（'ul.menu li.expanded ul.menu'）.hide（）；
//更改标题链接的目标
$（'ul.menu li.a'）.attr（“href”，“javascript:void（null）”）；
//切换嵌套列表的显示
$（'ul.menu li.a'）。单击（函数（）{
$（this.next（）.slideToggle（'normal'）；
});
});

除了将嵌套li元素的href属性也更改为“javascript:void（null）”之外，这一切都很好。有没有一种方法可以改变我的JavaScript函数，以确保它只将新的href属性应用于类为“expanded”的li元素，而不应用于类为“leaf”的li元素

现在，我只对JavaScript函数的修改感兴趣。正如我所说的，我知道并同意有更好的方法（比如首先改变Drupal主题的html输出），但是如果我能在重建整个应用程序时得到一个临时解决方案，那将是非常棒的

如果你有任何建议，请告诉我

---

谢谢

使用更具体的选择器：

$('ul.menu > li.expanded > a').attr( ...

只匹配直接子项而不是所有子项。

您可以尝试

$('ul.menu li.expanded>ul.menu').hide();

这使得它只应用于下一个元素

另一种方法是使用

$('ul.menu li.expanded ul.menu:first').hide();

---

您可以使用直接子选择器“>”。 e、 g:

$（函数（）{
//隐藏嵌套列表
$（'ul.menu li.expanded ul.menu'）.hide（）；
//更改标题链接的目标
$（'ul.menu li.expanded>a'）.attr（“href”，“javascript:void（null）”）；
//切换嵌套列表的显示
$（'ul.menu li.expanded>a'）。单击（函数（）{
$（this.next（）.slideToggle（'normal'）；
});
});

如果您只是试图阻止浏览器跟随href，则不需要“javascript:void（null）”命令。您要做的是阻止事件传播：

$("ul.menu li.expanded > a").click(function(event) {
  event.stopPropagation();
  ...
});

---

这工作做得很好！我不知道直接子选择器！！！解决了一切！

$("ul.menu li.expanded > a").click(function(event) {
  event.stopPropagation();
  ...
});