2013-02-26 197 views
0

我有一个ListView,我用它作为网站上的导航菜单。我想添加一些Jquery效果,使它看起来不错。我说这个剧本和jQuery的原理,但是当我上的链接或例如单击如果我点击jQuery Accordion停止在ListView中工作的路由链接

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

我的子菜单滴下来,并成为visable,但它不执行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> 
+0

你试过逃避双引号吗? ' Morpheus 2013-02-26 16:38:02

+0

不行,当我这样做的时候出错了 – jackncoke 2013-02-26 16:47:36

+0

你可以在代码执行完后发布html吗? – Morpheus 2013-02-26 16:59:00

回答

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

这个修好了!