jquery - jQuery 禁用链接

Question

基本上我有这个 HTML 表（它作为一个菜单）：

<table class="content" align="center">
    <tr>
        <td class="links">
            <table class="links">
                <tr>
                    <td>
                        <div id="i1">   
                            <a href="http://www.google.com">Sth 1</a>
                        </div>
                        <div id="i1">   
                            <a>Sth 2</a>
                            <div id="i2">   
                                <a href="http://www.google.com">Sth 2 2</a>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

和这个 jQuery 脚本使它打开/关闭：

$(document).ready(function(){
$("table.links").find("div").toggle(
    function(e){
        $(e.target).closest("div").children("div").slideDown(200);
    }, 
    function(e){
        $(this).children("div").slideUp(200);
    }
);});

对于一些未知的 jQuery 代码禁用链接 - 如果您右键单击链接并选择在新窗口中打开，您仍然可以打开它们，但如果您左键单击它们不会打开。

有人可以告诉我为什么会这样以及如何解决它。

下载所有文件（包括 HTML 代码、CSS 样式、jQuery 代码和 jQuery）：http ://www.2shared.com/file/veMG6Gjo/test.html

Answer 1

这是toggle()的已知副作用。文档说：

该实现还调用事件，因此如果在元素上调用.preventDefault()了链接，则不会跟踪链接，也不会单击按钮。.toggle()

要解决这个问题，您必须绑定到click而不是toggle.

-- 来源 --> jQuery: .toggle() 之后链接不起作用

---

所以你可以做类似的事情：

$(document).ready(function(){
    $("table.links").find("div").each(function(){
        var toggler = false;
        $(this).click(function(e){
            toggler = !toggler;
            if(toggler){
                 $(e.target).closest("div").children("div").slideDown(200);
            }else{
                  $(this).children("div").slideUp(200);
            }
        });
    });
 });

Answer 2

使用以下代码，这将仅在 div 有子项时启用切换：

$(document).ready(function(){
    $("table.links").find(".i2").parent().toggle(
        function(e){
            $(e.target).closest("div").children("div").slideDown(200);
        }, 
        function(e){
            $(this).children("div").slideUp(200);
        }
    );
});

另请注意，我使用.i2了而不是#i2，那是因为您应该使用类，而不是 ID。