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

Question

我已经四处寻找解决这个问题的方法，但它太奇怪了，我怀疑很多人都考虑过它。我最近作为 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 函数的目标是，

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

这工作得很好，除了它改变了 href 属性嵌套的 li 元素也为“javascript:void(null)”。有没有一种方法可以改变我的 JavaScript 函数，以确保它仅将新的 href 属性应用于具有“expanded”类的 li 元素，而不应用于具有“leaf”类的 li 元素？

此时，我真的只对 JavaScript 函数的更改感兴趣。就像我说的，我知道并同意有更好的方法（例如首先更改 Drupal 主题的 html 输出），但是如果我可以在重建整个应用程序时作为临时解决方案获得快速修复，那么太棒了！

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

谢谢！！！

Answer 1

您可以尝试

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

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

另一种方法是使用

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

Answer 2

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

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

Answer 3

使用更具体的选择器：

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

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

Answer 4

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

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