0

基本的に、私はこの 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

4

2 に答える 2

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);
            }
        });
    });
 });
于 2013-03-08T20:49:44.063 に答える
0

次のコードを使用します。これは、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);
        }
    );
});

また、ID ではなくクラスを使用する必要があるため、.i2ではなくを使用したことに注意してください。#i2

于 2013-03-08T20:47:07.347 に答える