jQuery предотвращает переход по ссылкам 2-го уровня - PullRequest
Новая
       9

jQuery предотвращает переход по ссылкам 2-го уровня

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

Я следовал этому руководству по созданию расширяющейся боковой навигации с помощью jQuery в Magento:

http://benfrain.com/notepad/2011/05/magento-add-an-expanding-accordion-style-vertical-side-menu.html

У меня все работает, но я пытаюсь понять, каксделать ссылки 2-го уровня расширяемыми, как 1-й уровень.

Это раздел в файле jquery.menubf.js, который запрещает переход по ссылкам первого уровня: 

jQuery('ul#vertnav > li').click(function(event) {
    event.preventDefault();
});

jQuery('ul#vertnav > li, ul#vertnav > li > ul > li').click(function(){
    var selfClick = jQuery(this).find('ul:first').is(':visible');
    if(!selfClick) {
        jQuery(this)
        .parent()
        .find('> li ul:visible')
        .slideToggle();

    }

    jQuery(this)
        .find('ul:first')
        .stop(true, true)
        .slideToggle(); 
});

автор больше не поддерживает это руководство, и я довольно растерялся из-за того, как изменить этот скрипт.Любые рок-звезды jQuery хотят указать мне правильное направление?

РЕДАКТИРОВАТЬ: Вот как выглядит результат: 

<div class="vertnav-container">
<div class="">
<h4 class="no-display">Category Navigation:</h4>
<ul id="vertnav">
<li class="first level0-active level0 active products open">
<span class="vertnav-cat"><a href="http://dev.site.com/products.html"><span>Products</span></a></span>
<ul>
<li class="first level1-inactive level1 inactive sitetion">
<span class="vertnav-cat"><a href="http://dev.site.com/products/sitetion.html"><span>sitetion</span></a></span>

</li>
<li class="level1-inactive level1 inactive ultrasonics">
<span class="vertnav-cat"><a href="http://dev.site.com/products/ultrasonics.html"><span>Ultrasonics</span></a></span>

</li>
<li class="level1-inactive level1 inactive surgery">
<span class="vertnav-cat"><a href="http://dev.site.com/products/surgery.html"><span>Surgery</span></a></span>

</li>
<li class="level1-inactive level1 inactive irrigation">
<span class="vertnav-cat"><a href="http://dev.site.com/products/irrigation.html"><span>Irrigation</span></a></span>

</li>
<li class="last level1-inactive level1 inactive diagnostics">
<span class="vertnav-cat"><a href="http://dev.site.com/products/diagnostics.html"><span>Diagnostics</span></a></span>

</li>

</ul>
</li>
<li class="next level0-inactive level0 inactive contact-us">
<span class="vertnav-cat"><a href="http://dev.site.com/contact-us.html"><span>Contact Us</span></a></span>

</li>
<li class="last level0-inactive level0 inactive about-us">
<span class="vertnav-cat"><a href="http://dev.site.com/about-us.html"><span>About Us</span></a></span>

</li>
</ul>
</div>
</div>
<div class="left-widget student-widget">
<h1>
Are you a registered Endodontic resident? <a href="http://dev.site.com/customer/account/create/?student=1" title="Create an Student Account">Sign up</a> to receive our university pricing.
</h1>
</div>
</div> 

    <div class="col-main">

                                <div class="std"><div class="home-content" style="display: none;">

<ul class="home-featured">

<li> <a href="http://dev.site.com/products.html/"><img src="http://dev.site.com/skin/frontend/default/orbtura/images/home/list1.jpg" alt="E-store specials" /></a> <a class="button blue-button" href="http://dev.site.com/products.html/">E-store specials</a> </li>

<li> <a href="http://dev.site.com/products/featured-products.html/"><img src="http://dev.site.com/skin/frontend/default/orbtura/images/home/list2.jpg" alt="Featured products" /></a> <a class="button blue-button" href="http://dev.site.com/products/featured-products.html/">Featured products</a> </li>

<li> <a href="http://dev.site.com/endoeducation/videos.html/"><img src="http://dev.site.com/skin/frontend/default/orbtura/images/home/list3.jpg" alt="Featured video" /></a> <a class="button blue-button" href="http://dev.site.com/endoeducation/videos.html/">Featured video</a> </li>

</ul>

</div></div><div style="margin-top: 30px"class="category-grid">
<ul>

<li>
<a class="image" href="http://dev.site.com/products/sitetion.html">
    <img class="css3-border"  src="http://dev.site.com/media/catalog/category/cache/1/thumbnail/190x170/9df78eab33525d08d6e5fb8d27136e95/sitetion_button_1.jpg" alt="sitetion"/>
</a>
<a class="button" href="http://dev.site.com/products/sitetion.html">sitetion</a>
</li>

<li>
<a class="image" href="http://dev.site.com/products/ultrasonics.html">
    <img class="css3-border"  src="http://dev.site.com/media/catalog/category/cache/1/thumbnail/190x170/9df78eab33525d08d6e5fb8d27136e95/ultrasonic_button_1.jpg" alt="Ultrasonics"/>
</a>
<a class="button" href="http://dev.site.com/products/ultrasonics.html">Ultrasonics</a>
</li>

<li>
<a class="image" href="http://dev.site.com/products/surgery.html">
    <img class="css3-border"  src="http://dev.site.com/media/catalog/category/cache/1/thumbnail/190x170/9df78eab33525d08d6e5fb8d27136e95/microsurgery_button_1.jpg" alt="Surgery"/>
</a>
<a class="button" href="http://dev.site.com/products/surgery.html">Surgery</a>
</li>

<li>
<a class="image" href="http://dev.site.com/products/irrigation.html">
    <img class="css3-border"  src="http://dev.site.com/media/catalog/category/cache/1/thumbnail/190x170/9df78eab33525d08d6e5fb8d27136e95/Irrigation_button.jpg" alt="Irrigation"/>
</a>
<a class="button" href="http://dev.site.com/products/irrigation.html">Irrigation</a>
</li>

<li>
<a class="image" href="http://dev.site.com/products/diagnostics.html">
    <img class="css3-border"  src="http://dev.site.com/media/catalog/category/cache/1/thumbnail/190x170/9df78eab33525d08d6e5fb8d27136e95/diagnostics_button_3.jpg" alt="Diagnostics"/>
</a>
<a class="button" href="http://dev.site.com/products/diagnostics.html">Diagnostics</a>
</li>
</ul>
</div>

<script type="text/javascript">
//<![CDATA[

jQuery(window).load(function(){
AutoHeigthLine(3,".category-grid li");
AutoHeigthLine(3,".category-grid a.button");
});

//]]>
</script>

1 Ответ

1 голос
/ 03 февраля 2012

Все, что я сделал, это изменил первый обработчик событий click, чтобы остановить распространение событий click, поэтому элемент <li>, по которому фактически выполняется щелчок, будет единственным, кто получит событие click, и я добавилвложенный <ul> элемент в качестве третьего уровня.

JS - 

jQuery('#vertnav li').click(function() {
    return false;
});

jQuery('#vertnav > li, #vertnav > li > ul > li').click(function(){
    if(!jQuery(this).find('ul').eq(0).is(':visible')) {
        jQuery(this)
        .siblings().find('ul:visible')
        .slideToggle();

    }

    jQuery(this)
        .find('ul').eq(0)
        .stop(true, true)
        .slideToggle(); 
});

Обратите внимание, что я удалил tagName s из селекторов, где это возможно, и вместо использования псевдо :first-selector Я использовал .eq(0), чтобы получить первый результат.Я также изменил селектор .parent().find('> li') на .siblings(), поскольку выбор родителя и потомка такой же, как выбор родного брата.Все это заставит код работать быстрее.

HTML - 

<ul id="vertnav">
    <li class="first level0-active level0 active products open">
        <span class="vertnav-cat"><a href="http://dev.site.com/products.html"><span>Products</span></a></span>
        <ul>
            <li class="first level1-inactive level1 inactive sitetion">
                <span class="vertnav-cat"><a href="http://dev.site.com/products/sitetion.html"><span>sitetion</span></a></span>
                <ul>
                    <li>Third Tier</li>
                </ul>
            </li>
            <li class="level1-inactive level1 inactive ultrasonics">
                <span class="vertnav-cat"><a href="http://dev.site.com/products/ultrasonics.html"><span>Ultrasonics</span></a></span>
            </li>
            <li class="level1-inactive level1 inactive surgery">
                <span class="vertnav-cat"><a href="http://dev.site.com/products/surgery.html"><span>Surgery</span></a></span>
            </li>
            <li class="level1-inactive level1 inactive irrigation">
                <span class="vertnav-cat"><a href="http://dev.site.com/products/irrigation.html"><span>Irrigation</span></a></span>
            </li>
            <li class="last level1-inactive level1 inactive diagnostics">
                <span class="vertnav-cat"><a href="http://dev.site.com/products/diagnostics.html"><span>Diagnostics</span></a></span>
            </li>
        </ul>
    </li>
    <li class="next level0-inactive level0 inactive contact-us">
        <span class="vertnav-cat"><a href="http://dev.site.com/contact-us.html"><span>Contact Us</span></a></span>
    </li>
    <li class="last level0-inactive level0 inactive about-us">
        <span class="vertnav-cat"><a href="http://dev.site.com/about-us.html"><span>About Us</span></a></span>
    </li>
</ul>

Вот демонстрационная версия: http://jsfiddle.net/8EvRB/2/

...