Jquery toggleclass函数仅适用于主页

时间:2015-04-24 20:07:43

标签: jquery drop-down-menu toggleclass

我有一个菜单,其中有一个下拉子菜单,在用户点击标题之前一直隐藏。

该菜单是MasterPage.master的一部分,因此它显示在网站中每个网页的顶部。在主页上,我可以点击菜单标题,子菜单下拉,我可以点击链接。然后进入列出部门的页面,但是当我点击菜单标题时(在部门页面上,即第二页),子菜单不会下拉。

我试图缩小问题范围,我认为这与第二页上的CSS有关,例如div已修复,但我已从第二页删除了所有内容,子菜单仍然没有t下降。

以下代码适用于MasterPage.master上的三个菜单之一,其中一个菜单在用户点击标题后在下一页上工作,但我不知道为什么一个在下面的菜单上工作不起作用。

请告诉我为什么下面的代码只在主页上运行一次?我一直试图将问题缩小数周而没有成功。

MasterPage.master页面中的JQuery

<script src="jquery.js" type="text/jscript"></script>

    $(document).ready(function() { 
        $('.parent').click(function() {
            $('.sub-nav').toggleClass('visible');
        });
    });
</script>

菜单(DepartmentList.ascx)

<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<ul id="nav">
    <li class="parent">Brands</HeaderTemplate> 
<ItemTemplate>
    <ul class="sub-nav">
        <li>
            <asp:HyperLink ID="DepartmentRoute" runat="server" 
     NavigateUrl='<%#: GetRouteUrl("DepartmentRoute", new { departmentId = 
 Eval("departmentId"), BrandName = (Eval("Name").ToString().FixUrl())})%>'   
text='<%# Eval("Name") %>' CssClass='<%# Eval("DepartmentId").ToString() ==   
Request.QueryString["DepartmentId"] ? "DepartmentSelected" :    
"DepartmentUnselected" %>'></asp:HyperLink>
        </li>
    </ul>
</ItemTemplate>   
<FooterTemplate>
   </li>
 </ul>
</FooterTemplate>

</asp:Repeater>

CSS代码

#nav {
list-style-type: none;
margin: 0;
padding: 0;

}

#nav li.parent {
width: 100%;
list-style-type: none;
background-color: #333030;
color: #ffffff;

}

#nav ul.sub-nav a:hover { /*list of departments*/
font-size: 0.8em;
font-family: Verdana;
text-decoration: none;
font-weight: bold;
color: #000;

}
#nav ul.sub-nav a {
font-size: 0.8em;
font-family: Verdana;
text-decoration: none;
color: #000;
}

#nav ul.sub-nav {
display: none;
list-style-type: none;
text-decoration: none;
text-align: left;
margin: 0 0 0 0;
}

#nav ul.visible {
display: block;
list-style-type: none;
padding: 0 0 5px 10px;
text-decoration: none;
line-height: 0.8em;
background-color: #d3c4c4;
border-bottom: solid 2px;
border-bottom-color: #ffffff;
}

我已从部门菜单从主页复制页面(Catalog3.aspx)中的代码。 DepartmentList菜单不会展开以显示此页面上的子菜单(Catalog3.aspx)。

 <%@ Page Title="lingerie-luxury" Language="C#"     
MasterPageFile="~/MasterPage.master" AutoEventWireup="true" 
CodeFile="Catalog3.aspx.cs" Inherits="Catalog3" %>

<%@ Register Src="~/ProductList.ascx" TagPrefix="uc1" 
TagName="ProductList"%>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent"   
Runat="Server">
<p class="productTitle"><asp:Label ID="departmentTitle" runat="server"    
Text=""></asp:Label></p>
<div class="DanTest">
<br />
<br />
<h1 class="productTitle">TESTING </h1>
</div>
</asp:Content>

当您点击菜单标题时,是否有人可以解释为什么菜单不会在Catalog3.aspx上展开?任何建议都会受到极大的欢迎。

0 个答案:

没有答案