0

次のようなリストがあるとします。

<ul>
<li><a href="Sitepages/Introduction.aspx">Introduction</a>
    <ul>
        <li><a href="Sitepages/AboutMe.aspx">About me</a></li>
        <li><a href="Sitepages/AboutTheCompany.aspx">About the company</a>
            <ul>
                <li><a href="Sitepages/History.aspx">History</a></li>
                <li><a href="Sitepages/Locations.aspx">Locations</a>
                    <ul>
                        <li><a href="Sitepages/Belgium.aspx">Belgium</a></li>
                        <li><a href="Sitepages/France.aspx">France</a></li>
                        <li><a href="Sitepages/Germany.aspx">Germany</a></li>
                        <li><a href="Sitepages/Norway.aspx">Norway</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</li>
</ul>

このネストされた ul をアコーディオンに変換して、最上位レベルのみが最初に表示されるようにするスクリプトがあります。別の ul を含む li 内のリンクをクリックするとすぐに、その ul が展開されます。

問題は、リンクが提供されていない場合、これはすべて正常に機能しますが、最下位レベルのものを除いて、すべての「a」タグのデフォルトの動作を無効にしたいということです。そのため、内部にリンクがある最下位レベルの li タグは、引き続きアクティブなリンクである必要があります。

最上位リンクのデフォルトの動作を無効にする JavaScript コードは次のとおりです。

    $this.find("li").each(function(){
    if ($(this).find("ul").size() != 0) {
        if ($(this).find("a:first")) {
            $(this).find("a:first").click(function(){ return false; });         
    }
});

最上位のリンク (紹介) をクリックするとデフォルトの動作 (リダイレクト) が無視されますが、展開されて [自己紹介] および [会社について] オプションが表示されます。しかし、「会社について」をクリックすると、リダイレクトされます。

最後のタグ (私の例では国名) を除いて、すべての「a」タグのデフォルトの動作を false に設定するには、コードで何を編集すればよいですか?

ご協力いただきありがとうございます！

4

1 に答える 1

0

2 つのハンドラーをセットアップできます。1 つは順序なしリスト内のすべてのリンクを無効にし、もう 1 つは最後の順序なしリストのクリックを処理します。

// Disable all links within an ul
$('ul').on("click", "a", function(e){
    e.preventDefault();
});

// second handler to bind to the last ul
$('ul:last').on("click", "a", function(e){
    window.location.href = $(e.target).attr('href');
});

フィドル: http://jsfiddle.net/puleos/CjB99/

于 2013-04-25T15:38:42.990 に答える