Как добавить событие onclick в класс li? - PullRequest
0 голосов
/ 23 февраля 2012

Я хочу применить этот атрибут:

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

для каждого li с class = "parent"

Пока у меня есть это и я не могу заставить его работать:

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

Ответы [ 4 ]

4 голосов
/ 23 февраля 2012

Просто сделайте следующее

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

пример здесь

Ниже приведена обновленная версия того, что вы ищете.Он обнаружит щелчок по ссылке и проверит свой родительский элемент li для класса parent.Если он найдет класс, он заблокирует ссылку и расширит меню.Если класс не найден, ссылка работает как следует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;
        } 
    }); 
});
2 голосов
/ 23 февраля 2012

Это будет работать для всех 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);
});
1 голос
/ 23 февраля 2012

Если вы хотите использовать 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".

0 голосов
/ 23 февраля 2012

Не используйте атрибут.Используйте функцию jQuery click :

$('li.parent').click(function(){
    expandMenu(this.parentNode);
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...