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

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默默地取消其他点击事件的方式，它可能会再次让你感到惊讶，所以我会用一个合适的.click替换你的.toggle，并使用.slideToggle：

$("#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');
    };
});​

您也可以在单击处理程序中使用.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树形菜单，有可下载的压缩包。http://mediamilan.com/how-to-create-simple-tree-structure-menu-using-jquery-and-css/

*更换head下方页面中的JS，因为错误。这允许您设置href或link。