Question

我按照本教程使用Magento中的jQuery进行扩展侧导航：

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

我已经有了它的工作，但我正在试图弄清楚如何使第二级链接像第一级一样可扩展。

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

Answer 1

我所做的就是更改第一个click事件处理程序以停止click事件的传播，因此实际点击的<li>元素将是唯一接收click元素的元素{1}}事件我添加了一个嵌套的<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，而不是使用:first伪选择器，而是使用.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/

jQuery阻止遵循第二级链接

1 个答案: