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

【问题标题】：How can I stop a JavaScript function from affecting a child element?如何阻止 JavaScript 函数影响子元素？
【发布时间】：2011-07-01 18:59:35
【问题描述】：

我已经四处寻找解决此问题的方法，但它非常不稳定，我怀疑很多人是否考虑过它。我最近作为 Web 管理员继承的一个 Web 应用程序在 Drupal（版本 6）上运行。不幸的是，由于必须首先完成的其他义务，我无法在 5 月之前编辑 Drupal 安装或创建自定义主题。

首先，我意识到并完全同意有更有效（和优雅）的方法来解决这个问题，但目前，这是客户想要并且乐于实施的方法。

不管怎样，老管理员正在使用 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>

我对这个输出最大的担忧是，有一个类属性为“menu”的 ul 元素嵌套在另一个类属性为“menu”的 ul 元素中。

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

只要单击具有“扩展”类的相应 li 元素，就允许 jQuery 展开和折叠子 ul 元素
仅将具有“扩展”类的 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 输出开始），但是如果我可以在重建整个应用程序时快速修复作为临时解决方案，那太棒了！

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

谢谢！！！

【问题讨论】：

标签： javascript jquery html drupal parent-child

【解决方案1】：

使用更具体的选择器：

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

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

【讨论】：

这很完美！我不知道直接子选择器！！！解决了一切！

【解决方案2】：

如果您只是想阻止浏览器跟随 href，则不需要“javascript:void(null)”。你想要做的是阻止事件传播：

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

【讨论】：

【解决方案3】：

你可以试试

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

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

另一种方法是使用

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

【讨论】：

【解决方案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>

【讨论】：