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

Question

我一直在寻找解决这个问题的方法，但是它是如此的怪异，以至于我怀疑很多人都已经考虑过了。 我最近作为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元素的内部嵌套了一个具有“ menu”的class属性的ul元素。

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

1. 每当单击具有“ expanded”类的相应li元素时，允许jQuery展开和折叠子ul元素
2. 将类别为“ 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>

除了将嵌套的li元素的href属性也更改为“ javascript：void（null）”之外，此方法效果很好。 有没有一种方法可以更改我的JavaScript函数，以确保它仅将新href属性仅应用于具有“扩展”类的li元素，而不应用于具有“叶子”类的li元素？

在这一点上，我真的只对更改JavaScript函数感兴趣。 就像我说的那样，我知道并同意，有更好的方法（例如，从一开始就更改Drupal主题的html输出），但是如果在重新构建整个应用程序时可以作为临时解决方案来快速修复，那太棒了！

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

谢谢！！！

Answer 1

使用更具体的选择器：

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

>仅匹配直接子代，而不匹配所有子代。

Answer 2

如果您只是想阻止浏览器遵循href，则不需要“ javascript：void（null）”。 您要做的是阻止事件传播：

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

Answer 3

你可以试试

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

这使得它仅适用于下一个元素。

另一种方法是使用

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

Answer 4

您可以使用直接子选择器“>”。 例如：

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