Javascript 如何将onclick事件附加到li类？

我要应用此属性：

onclick=​"expandMenu(this.parentNode)​"

使用class=“parent”向每个li发送

到目前为止，我有这个，但无法让它工作：

<script type="text/javascript">
if ($('li').hasClass('parent'))
{
'onclick' => 'expandMenu(this.parentNode)';
}
</script>

if（$（'li'）.hasClass（'parent'））
{
'onclick'=>'expandMenu（this.parentNode）'；
}

这是菜单的浏览器端代码，由Magento生成。每个li内部都有一个锚定标签。我想我需要把这些东西弄得不可辨认，这样才能起作用。我希望能够通过单击li扩展产品类别（如箭头所示），而不是让它带您进入页面：

<div id="sidebar-nav" class="sidebar-nav-left">
<div class="block-title">
<strong><span>Categories</span></strong> 
</div>
<div class="block-content">
<ul id="sidebar-nav-menu">
<li class="level0 nav-1 first parent" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 10px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="tion.html"><span class="category_name">tion</span></a>
</div>
<ul class="level0" style="margin-left: 5px; padding-left: 10px;" expanded="0">
<li class="level1 nav-1-1 first parent" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 10px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="system.html"><span class="category_name">System</span></a>
</div>
<ul class="level1" style="margin-left: 5px; padding-left: 10px;" expanded="0">
<li class="level2 nav-1-1-1 first last" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 0px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
a href="accessories.html"><span class="category_name">Accessories</span></a>
</div>
</li>
</ul>
</li><li class="level1 nav-1-2" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 0px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="pack.html"><span class="category_name">Pack</span></a>
</div>
</li><li class="level1 nav-1-3" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 0px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="system.html"><span class="category_name">System</span></a>
</div>
</li><li class="level1 nav-1-4 parent" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 10px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="accessories.html"><span class="category_name"> Accessories</span></a>
</div>
<ul class="level1" style="margin-left: 5px; padding-left: 10px;" expanded="0">
<li class="level2 nav-1-4-2 first" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 0px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="needles.html"><span class="category_name"> Needles</span></a>
</div>
</li><li class="level2 nav-1-4-3" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 0px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="cha.html"><span class="category_name">Percha</span></a>
</div>
</li><li class="level2 nav-1-4-4" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 0px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="condensers.html"><span class="category_name">Condensers</span></a>
</div>
</li><li class="level2 nav-1-4-5" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 0px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="resilon.html"><span class="category_name">Resinate</span></a>
</div>
</li><li class="level2 nav-1-4-6 last" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 0px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="pluggers.html"><span class="category_name">Heat</span></a>
</div>
</li>
</ul>
</li><li class="level1 nav-1-5" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 0px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="heat.html"><span class="category_name">Heat</span></a>
</div>
</li><li class="level1 nav-1-6 last" style="margin-left: 0px;">
<span class="arrow" onClick="expandMenu(this.parentNode)" 
style="width: 8px; height: 0px;"></span>

<div class="collapsible-wrapper" style="margin-left: 14px;">
<a href="replacement-parts.html"><span class="category_name">Parts</span></a>
</div>
</li>
</ul>
</li>        </ul> 
</div>
</div>

类别






a href=“associates.html”>附件

只需执行以下操作

$("li.parent").click(function()
{
    expandMenu(this.parentNode);
});

范例

下面是我认为你正在寻找的最新版本

它将检测到一个链接点击，并检查其父类

父类
的父类
li
。如果找到类，它将阻止链接并展开菜单。如果找不到该类，则链接将按其应该的方式工作

$("#sidebar-nav-menu a").click(function()
{
    if($(this).parent().parent().hasClass("parent"))
    {       
        expandMenu(($(this).parent()).parentNode);
        //return flase prevents the anchor link from working
        return false;
    }
});

编辑

您没有告诉我们您将jquery
$
重新定义为
jquery

把这个放到你的
unclick.js

jQuery(document).ready( function() 
{ 
    jQuery("#sidebar-nav-menu li.level0 > div > a").click(function() 
    {
        if(jQuery(this).parent().parent().hasClass("parent")) 
        { 
            expandMenu(this.parentNode.parentNode); 
            //return flase prevents the anchor link from working 
            return false;
        } 
    }); 
});

不要使用该属性。使用jQuery函数：

$('li.parent').click(function(){
    expandMenu(this.parentNode);
});

这将适用于文档中当前包含父类的所有
li
元素：

$('li.parent').on('click', function(){
    expandMenu(this.parentNode);
});

但是，如果要对以后可能添加的图元执行此操作，可以使用以下方法：

$(document.body).on('click', 'li.parent', function(){
    expandMenu(this.parentNode);
});

编辑

为了防止链接触发，您可以使用以下代码：

$('#sidebar-nav-menu a').on('click', function(e) {
   e.preventDefault();
});

但这将阻止菜单上的所有链接触发（除了调用此方法后添加的链接）

重新编辑

最后，我们可以使用它，它只会触发没有子菜单的链接

$('#sidebar-nav-menu a').on('click', function(e) {

    if($(this).parent().siblings('ul').length)
    {
        // If my anchor is associated with a sub-catagory, prevent it from firing.
        e.preventDefault();
    }

    expandMenu(this.parentNode);
});

如果要使用jQuery，只需将以下代码添加到此文件：
[your_magento_root]/skin/frontend/default/default/js/sidenavcollapse.js

jQuery(document).ready( function() 
{
    $('#sidebar-nav-menu div.collapsible-wrapper').click(function(){
        expandMenu(this.parentNode);
        return false;
    });
});

不要忘记加载jQuery库。如果你喜欢用其他方式，比如编辑生成的HTML，请让我知道，我会说的

编辑：

我们返回false以停用“a”标签的“href”。
谢谢提示。仍然不工作，但li菜单在Magento中动态生成，每个li中都有锚定链接。有没有办法让这些锚不可与js连接？我在上面发布了浏览器端代码。@miles从技术上讲，它确实有效，但您有嵌套的
li
，这会导致单击触发嵌套的
li
，该嵌套的
li
具有一个
parent
类，即使它没有类
parent
也很棒，谢谢！但出于某种原因，它只对第一个
父项
li
起作用，即使在单击后续项目时也是如此。查看链接以了解我的意思。它还扩展了具有父级的第二级
li
。我们是否可以阻止这种情况，只需转到链接？@miles那么您只希望第一个父级进行扩展？那么您只希望没有父级
li
的锚定标记与类
parent
一起作为实际链接，并将您带到另一个页面。如果它确实有一个父级
li
和一个类
parent
，那么它会扩展吗？希望唤醒者想要任何
li
类
parent
没有父
li
的类扩展。任何有家长的人都应该转到另一页。查看下面我的新答案，看看这是否是你想要的。你的侧边栏编辑工作不正常。您需要将
#
放在它前面+1，是的，将事件管理放在标记之外以及它所属的代码中：）@Henesnarfel，true。我修好了：）