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

Question

我想应用这个属性：

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

到每个带有 class="parent" 的 li

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

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

这是菜单的浏览器端代码，由 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>

Answer 1

只需执行以下

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

示例此处

下面是我认为您正在寻找的内容的更新版本。

它将检测链接点击并检查其父 li 类的 parent。如果找到该类，它将阻止链接并展开菜单。如果找不到该类，则链接将正常工作

$("#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

put这在你的 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;
        } 
    }); 
});

Answer 2

这适用于文档中当前具有parent类的所有li元素：

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

但是，如果您想对执行此操作>future 稍后可能添加的元素，您可以使用以下内容：

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

编辑

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

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

但这会阻止 all< /em> 菜单上的链接免于触发（添加的链接除外） 调用此方法之后）；

再次编辑

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

$('#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);
});

Answer 3

如果你想使用 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”。

Answer 4

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

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