javascript - 可折叠菜单中根链接的效果/操作无效 - 只是效果 - jQuery

Question

我有一个动态生成的可折叠菜单，像这样

<div id="mobile">
    <ul id="navigation">
        <li class="active">
            <a href="index.php?id=12">About Us</a>
        </li>
        <li>
            <a href="index.php?id=24">Approach</a>
            <ul class="subnavi">
                <li>
                    <a href="index.php?id=24">How we work</a>
                </li>
                <li>
                    <a href="index.php?id=25">Who we are</a>
                </li>
                <li>
                    <a href="index.php?id=26">Knowledge</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="index.php?id=14">Solutions</a>
        </li>
        <li>
            <a href="index.php?id=15">Contact</a>
        </li>
    </ul>
</div>

这是使用 jQuery 折叠子菜单的代码：

$('#mobile #navigation > li:has(ul) + a').on("click",function() {
    $(this).find('ul').show().end().siblings().find('ul').hide();
    return false;
}); 

我的问题是，一旦我单击“方法”菜单链接，我就会激活“方法”链接。如何在不触发链接的情况下仅激活 .show() API。

更具体地说，如果我点击“接近”我不想去那个页面，我只想让子菜单折叠。

这有意义吗？如果是这样，请给我一个提示。

Answer 1

你的选择器是错误的，使用这个：

$('#mobile #navigation > li:has(ul) > a').on("click",function(e) {
    $(this).siblings('ul').show().end().closest('li').siblings().find('ul').hide();
    e.preventDefault()
}); 

我已更改+ a为，> a因为它a是li.

我也.find('ul')改成.siblings('ul')

我.closest('li')在最后一个之前添加了.siblings().

http://jsfiddle.net/tagmx/1/

Answer 2

尝试这个

 $("a").click(function(event){
  event.preventDefault();
});

检查这个http://api.jquery.com/event.preventDefault/的 event.preventDefault();