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>

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

我写的JavaScript函数的目标是

只要点击具有“扩展”类的相应li元素，就允许jQuery展开并折叠子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>

这很好用，除了它将嵌套的li元素的href属性更改为“javascript：void（null）”。有没有办法可以改变我的JavaScript函数，以确保它只将新的href属性应用于具有“扩展”类的li元素，而不是具有“leaf？”类的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

您可以使用直接子选择器“＆gt;”。 e.g：

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

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

4 个答案: