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。

- 来源 - ＆gt; jQuery: link doesn't work after .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。

jQuery禁用链接

2 个答案: