在第3个子菜单上停止slidetoggle并按照链接

时间:2014-02-10 15:20:14

标签: javascript jquery

我有一个由Wordpress小部件生成的复杂子菜单。这是4级深度。

我只是展示了第一级。然后使用以下代码,我禁用超链接并显示子菜单。

jQuery(function () {
      jQuery('.widget_wpdm_categories_widget ul > li > a').click(function () {               
         jQuery(this).next('ul').slideToggle();
         return false; 
      }) 
    });

我的问题是我只想花两次钱。所以类似的东西:
菜单项
- 子菜单1
- 子菜单2

现在,当您单击子菜单2中的链接时,我不想展开它。我想跟随链接。

我怎么知道这个?我的HTML看起来像这样:

<li class="cat-item cat-item-41"><a href="http://wptest.alcadis.nl/downloads/metageek/" title="Alle berichten opgeslagen onder Metageek bekijken">Metageek</a>
    <ul class="children" style="display: block;">
        <li class="cat-item cat-item-265"><a href="http://wptest.alcadis.nl/downloads/chanalyzer-metageek/" title="Alle berichten opgeslagen onder Chanalyzer bekijken">Chanalyzer</a>
            <ul class="children" style="display: block;">
                 <li class="cat-item cat-item-266"><a href="http://wptest.alcadis.nl/downloads/pro/" title="Alle berichten opgeslagen onder Pro bekijken">Pro</a>
                      <ul class="children" style="display: block;">
                          <li class="cat-item cat-item-77"><a href="http://wptest.alcadis.nl/downloads/software/" title="Alle berichten opgeslagen onder Software bekijken">Software</a>
                          </li>
                      </ul>
                 </li>
            </ul>
        </li>
    </ul>
</li>

1 个答案:

答案 0 :(得分:0)

一种简单的方法是只计算您点击的链接的父<ul>元素:

if ($(this).parents('ul').length < 3)

<强> jsFiddle example

jQuery('.widget_wpdm_categories_widget ul > li > a').click(function () {
    if ($(this).parents('ul').length < 3) {
        jQuery(this).next('ul').slideToggle();
        return false;
    }
})