如何在li類中添加onclick事件？

我想這個屬性適用於：如何在li類中添加onclick事件？

onclick="expandMenu(this.parentNode)"

每立與類=「父」

到目前爲止，我有這一點，並不能得到它的工作：

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

這是Magento生成的菜單的瀏覽器端代碼。每個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>

來源

2012-02-22 miles

所以你只需要沒有父'li'的父標識符作爲一個實際的鏈接，並帶你到另一個頁面。如果父類'父'具有'''，那麼它會擴展？希望這是有道理的 – Henesnarfel 2012-02-22 21:07:49

我想要''沒有父'li'類的''''''''來擴展。任何有父'李'的應該帶你到另一頁。 – miles 2012-02-22 21:16:56

看看下面我的新答案，看看你是否想要 – Henesnarfel 2012-02-22 21:23:12

只要做到以下

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

示例here

以下是我認爲您正在尋找的更新版本。

它會檢測鏈接點擊並檢查其父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; 
    } 
});

編輯

你沒有告訴我們你在unclick.js重新定義了jQuery $到jQuery

把這個

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; 
     } 
    }); 
});

來源

2012-02-22 20:36:40 Henesnarfel

感謝您的提示。仍然無法正常工作，但li菜單是在Magento中動態生成的，每個li中都有錨鏈接。有沒有辦法讓這些錨點與js不可點擊？我發佈了上面的瀏覽器端代碼。 – miles 2012-02-22 20:50:01

@miles從技術上講，它確實有效，但是你已經嵌套了'li'，它導致點擊在嵌套'li'上觸發，該''li'有一個'parent'類的父'li'，即使它沒有類'父母' – Henesnarfel 2012-02-22 21:01:52

@miles給你一個新的答案 – Henesnarfel 2012-02-22 23:03:35

請勿使用該屬性。使用jQuery的click功能：

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

來源

2012-02-22 20:37:15 Paulpro

這將爲所有li元素的工作與文檔上的parent類目前：

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

來源

2012-02-22 20:41:15

您的側邊欄編輯無法正常工作。你需要在它前面加上＃＃ – Henesnarfel 2012-02-22 21:22:00

+1，是保持事件管理不在標記中，並且在它所屬的代碼中:) – 2012-02-22 21:22:36

@Henesnarfel，true。我修好了它：） – 2012-02-22 21:29:19

如果你想使用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，停用「」標籤的「HREF」。

來源

2012-02-23 01:22:03 Omid

如何在li類中添加onclick事件？

回答

相關問題