0

ListViewサイトのナビゲーション メニューとして使用する があります。見栄えを良くするために、いくつかの Jquery 効果を追加したかったのです。このスクリプトを追加すると、Jquery は機能しますが、リンクをクリックしたとき、またはたとえば 

<a class="head" href="<%#: GetRouteUrl("ProductsByCategoryRoute", new {categoryName = Item.CategoryName}) %>">
                        <%#: Item.CategoryName %>
                    </a>

サブメニューがドロップダウンして表示されるようになりますが、href. 表示されているサブリンクと同じです。クリックすると、ポストバックが空になります。このメニューはクエリを実行し、クリックした内容に基づいて結果を表示するためです。サーバー側でこれらのアコーディオン効果を実行する必要がありますか?

この Jquery を使用すると、ルーティングされたリンクが機能しなくなるのはなぜですか。

jquery スクリプト:

<script>
 var $open = $();
        $('.head').click(function (e) {
            e.preventDefault();
            $open.slideUp();
            $open = $(this).closest('li').find('.content');
            $open.not(':animated').slideToggle();
        });
    </script>

マークアップ:

            <asp:ListView ID="categoryList" runat="server"
    OnItemDataBound="brandList_ItemDataBound" ItemType="E_Store_Template.Models.Category" SelectMethod="GetCategories">
    <LayoutTemplate>
        <ul style="list-style-type: none;">
            <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
        </ul>
    </LayoutTemplate>
    <ItemTemplate>
        <li style="text-align: left;">
            <b style="font-size: large; font-style: normal">
                <a class="head" href="<%#: GetRouteUrl("ProductsByCategoryRoute", new {categoryName = Item.CategoryName}) %>">
                    <%#: Item.CategoryName %>
                </a>
            </b>
            <asp:ListView ID="brandList" runat="server" ItemType="E_Store_Template.Models.Brand">
                <LayoutTemplate>
                    <ul style="list-style-type: none; text-align: left;">
                        <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
                    </ul>
                </LayoutTemplate>
                <ItemTemplate>
                    <li>
                        <a class="content" href="<%#: GetRouteUrl("ProductsByCatBrandRoute",  new { brandName = Item.BrandName })%>">
                            <%#: Item.BrandName %>
                        </a>
                    </li>
                </ItemTemplate>
            </asp:ListView>
        </li>
    </ItemTemplate>
</asp:ListView>

ソース

すべての製品

<ul style="list-style-type: none;">

<li style="text-align: left;">
    <b style="font-size: large; font-style: normal">
        <a class="head"  href="/ProductList/Rods">
            Rods
        </a>
    </b>

            <ul style="list-style-type: none; text-align: left;">

            <li>
                <a class="content" href="">
                    Brand1
                </a>
            </li>

            <li>
                <a class="content" href="">
                    Brand2
                </a>
            </li>

            </ul>

</li>

<li style="text-align: left;">
    <b style="font-size: large; font-style: normal">
        <a class="head"  href="/ProductList/Reels">
            Reels
        </a>
    </b>

            <ul style="list-style-type: none; text-align: left;">

            <li>
                <a class="content" href="">
                    Brand1
                </a>
            </li>

            <li>
                <a class="content" href="">
                    Brand2
                </a>
            </li>

            <li>
                <a class="content" href="">
                    Brand3
                </a>
            </li>

            </ul>

</li>

<li style="text-align: left;">
    <b style="font-size: large; font-style: normal">
        <a class="head"  href="/ProductList/Tackle">
            Tackle
        </a>
    </b>

            <ul style="list-style-type: none; text-align: left;">

            <li>
                <a class="content" href="">
                    Brand1
                </a>
            </li>

            <li>
                <a class="content" href="">
                    Brand2
                </a>
            </li>

            <li>
                <a class="content" href="">
                    Brand3
                </a>
            </li>

            </ul>

</li>

<li style="text-align: left;">
    <b style="font-size: large; font-style: normal">
        <a class="head"  href="/ProductList/Apparel">
            Apparel
        </a>
    </b>

            <ul style="list-style-type: none; text-align: left;">

            <li>
                <a class="content" href="">
                    Brand1
                </a>
            </li>

            </ul>

</li>

</ul>

    </section>
4

1 に答える 1

0 
<script>
 var $open = $();
        $('.head').click(function (e) {
           // e.preventDefault();
            $open.slideUp();
            $open = $(this).closest('li').find('.content');
            $open.not(':animated').slideToggle();
        });
    </script>

これで治りました！

于 2013-02-27T01:45:35.263 に答える