c# - jQuery Accordion 阻止路由链接在 ListView 中工作

Question

我有一个 ListView 用作网站上的导航菜单。我想给它添加一些 Jquery 效果，让它看起来不错。我添加了这个脚本并且 Jquery 工作但是当我点击链接或者例如如果我点击

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

我的子菜单下拉并变得可见，但它不执行 href。与显示的子链接相同。当我单击它时，它会清空回发。因为此菜单会根据您单击的内容进行查询并显示结果。我应该在服务器端做这些 Accordion 效果吗？

为什么这个 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>

Answer 1

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

这修复了它!