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) 的文档:

Since .toggle() internally uses a click handler to do its work, we must unbind click to remove a behavior attached with .toggle(), so other click handlers can be caught in the crossfire. The implementation also calls .preventDefault() on the event, so links will not be followed and buttons will not be clicked if .toggle() has been called on the element.

看来你也遇到了这种情况。您可以使用几行 jQuery 添加点击功能:

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

(这在 fiddle 中不起作用，但它应该在您的网站上起作用。)

但是，我不喜欢 .toggle 默默地取消其他点击事件的方式，并且它可能会再次让您感到惊讶，所以我会替换您的 .toggle 与适当的 .click 并使用 .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在点击处理程序内部以缩短您的代码，但我无法确定您希望如何根据您的 fiddle 添加或删除类。

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