Question

我的树状菜单位于无序列表中。但是它中的链接不起作用，我认为因为整个ul都会监听jquery脚本。我希望链接可以导航，任何人都可以告诉我该怎么做？

jquery的：

   $("#treeMenu li").toggle(

function() {
    $(this).children('ul').slideDown()
    if ($(this).hasClass('contentContainer')) {
        $(this).removeClass('contentContainer').addClass('contentViewing');
    }
}, function() {
    $(this).children('ul').slideUp()
    if ($(this).hasClass('contentViewing')) {
        $(this).removeClass('contentViewing').addClass('contentContainer');
    }
});

HTML：

<ul id="treeMenu">
    <li class="folder1"> folder1
        <ul style="display: none">
            <li class="contentContainer"><a href="http://www.google.com">1.1</a></li>

            <li class="contentContainer"><a href="http://www.google.com">1.2</a></li>

            <li class="contentContainer"><a href="http://www.google.com">1.3</a></li>

            <li class="contentContainer"><a href="http://www.google.com">1.4</a></li>

</ul>

jsfiddle

Answer 1

来自.toggle (event)的文档：

由于.toggle（）在内部使用单击处理程序来完成其工作，因此我们必须解除绑定以删除与.toggle（）附加的行为，以便可以在交火中捕获其他单击处理程序。该实现还会对事件调用.preventDefault（），因此不会跟踪链接，如果在元素上调用了.toggle（），则不会单击按钮。

看起来这就是你发生的事情。您可以使用几行jQuery添加点击功能：

$('a').click(function() {
    location.href = $(this).attr('href');
});

（这不适用于小提琴，但它应该适用于您的网站。）

但是，我不喜欢.toggle默默取消其他点击事件的方式，并且可能会让您再次感到惊讶，所以我会用适当的{{1}替换您的.toggle而使用.slideToggle代替：

.click

您也可以在点击处理程序中使用.toggleClass来缩短代码，但我无法确定您希望如何根据您的小提琴添加或删除类。

http://jsfiddle.net/Kukd2/6/

Answer 2

http://jsfiddle.net/Kukd2/3/ 检查slideToggle和toggleClass。

Answer 3

有效吗？替换html文件中的js。

$("#treeMenu li").click(function() {
    $(this).children('ul').slideToggle();
    if ($(this).hasClass('contentContainer')) {
        $(this).removeClass('contentContainer').addClass('contentViewing');     
    } else if ($(this).hasClass('contentViewing')) {
        $(this).removeClass('contentViewing').addClass('contentContainer');
    }
});

JS错了，不允许你设置文字链接：

<script type="text/javascript">
    $(document).ready(function() {

    //Class 'contentContainer' refers to 'li' that has child with it.
    //By default the child ul of 'contentContainer' will be set to 'display:none'

        $("#treeMenu li").toggle(           

              function() { // START FIRST CLICK FUNCTION
                  $(this).children('ul').slideDown()
                  if ($(this).hasClass('contentContainer')) {   
                      $(this).removeClass('contentContainer').addClass('contentViewing');
                  }
              }, // END FIRST CLICK FUNCTION

              function() { // START SECOND CLICK FUNCTION
                  $(this).children('ul').slideUp()

                  if ($(this).hasClass('contentViewing')) {
                      $(this).removeClass('contentViewing').addClass('contentContainer');
                  }
                    } // END SECOND CLICK FUNCTIOn
                ); // END TOGGLE FUNCTION 

    }); // END DOCUMENT READY

</script>

像这个网站或JQuery树菜单一样，有可下载的ZIP。 http://mediamilan.com/how-to-create-simple-tree-structure-menu-using-jquery-and-css/

*更改头部下方页面中的JS，因为它错了。这允许您设置href或link。

jQuery：树状菜单中的链接不导航，如何解决这个问题？

3 个答案: