Fatal编程技术网
  • jquery/
  • jQuery阻止二级链接被跟踪

jQuery阻止二级链接被跟踪

jquery magento

jQuery阻止二级链接被跟踪,jquery,magento,jquery-ui-accordion,Jquery,Magento,Jquery Ui Accordion,我遵循本教程，在Magento中使用jQuery进行扩展侧导航： 我已经让它工作，但我试图找出如何使第二级链接像第一级一样可扩展 这是jquery.menubf.js文件中防止遵循第一级链接的部分： jQuery('ul#vertnav > li').click(function(event) { event.preventDefault(); }); jQuery('ul#vertnav > li, ul#vertnav > li > ul > li'

我遵循本教程，在Magento中使用jQuery进行扩展侧导航：

我已经让它工作，但我试图找出如何使第二级链接像第一级一样可扩展

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


类别导航：

    

  • 

      

    • 

      • 

    • 

      • 

    • 

      • 

    • 

      • 

    • 

      • 

    

    • 

  • 

    • 

  • 

    • 


你是注册牙髓病患者吗？接受我们大学的定价。

    

  • 

  • 

  • 



    

  • 

    • 

  • 

    • 

  • 

    • 

  • 

    • 

  • 

    • 


//
我所做的只是更改第一个
单击事件处理程序以停止
单击事件的传播，因此实际单击的
    • 元素将是唯一接收
    单击事件的元素，我添加了一个嵌套的
    元素作为第三层
    
JS--
    
请注意，我尽可能地从选择器中删除了标记名
    ，而不是使用
    ：first
    伪选择器，我使用
    .eq（0）
    获得第一个结果。我还将
    .parent（）.find（'>li'）
    选择器更改为
    .siblines（）
    ，因为选择父对象和子对象与选择同级对象相同。这些都将使代码执行得更快
    
HTML--
    

      

    • 

        

      • 

          

        • 第三层
          • 

        

        • 

      • 

        • 

      • 

        • 

      • 

        • 

      • 

        • 

      

      • 

    • 

      • 

    • 

      • 

    

    

    下面是一个演示：
    您的HTML结构是什么样子的？菜单的HTML是根据类别和产品动态生成的。您可以从开发人员工具中获取输出吗？让页面加载，然后检查开发工具中的
    #vertnav
    元素，并复制该元素的HTML结构。在不知道选择器试图遍历的HTML结构的情况下调试选择器是非常困难的（不可能的）。我用您的修订版替换了jQuery，但仍然没有看到第三级。如果您想看一看，这就是开发人员网站：dev.obtura.com我查看了页面的源代码，但您不是在第三层中编码，您必须将
      元素添加到第二层
    • 元素。。。请看我的JSFIDLE，以获取关于此的示例。您发布的JS代码工作正常，但您的HTML结构需要更新以反映您希望发生的事情。我不确定如何在第三级编写代码，因为菜单是生成的，但我知道应该出现第三级。再次查看站点，我将旧的导航放回原处（这是我一直试图用单击可扩展样式菜单替换的），它使用悬停来显示标高。起初，我只是尝试修改旧菜单，单击“按我所希望的方式展开”，但这似乎不起作用。我在这里发布了这个问题：这两个菜单有不同的HTML。我再次查看，您的新菜单中没有任何第三层
      元素。你必须添加它们。。。

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

      

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