如何将onclick事件追加到li类中

How to append onclick event to li class?

本文关键字：li 类中 追加 事件 onclick      更新时间：2023-09-26

我想应用这个属性：

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>

只需执行以下

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

把这个放在你的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;
        } 
    }); 
});

这将适用于文档上当前具有parent类的所有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/sidnavcollapse.js

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

不要忘记加载jQuery库。如果你喜欢用其他方式做这件事，比如编辑生成的HTML，请告诉我，我会说的。

编辑：

对于停用"a"标记的"href"，我们返回false。

不要使用该属性。使用jQuery点击功能：

$('li.parent').click(function(){
    expandMenu(this.parentNode);
});
相关文章：