javascript - 导航侧菜单中的项目不会折叠
问题描述
我正在开发一个 asp.net 网络表单应用程序，其母版页包含从数据库动态填充的导航侧菜单。
服务器端的一切都按我的预期工作，但是当我单击父菜单项时，客户端子菜单项并没有隐藏。
这是aspx页面代码：
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="ReservedAreaMP.master.cs" Inherits="WEBSITE_FBC.PRESENTATION_LAYER.RESERVED_AREA.ReservedAreaMP" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fearbetweencrowd Official Website</title>
<link runat="server" rel="shortcut icon" type="image/x-icon" href="~/img/logo_iconaSito.png">
<style type="text/css">
.nav-side-menu
{
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #2e353d;
position: fixed;
top: 0px;
width: 300px;
height: 100%;
color: #e1ffff;
}
.nav-side-menu .brand
{
background-color: #23282e;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
}
.nav-side-menu .toggle-btn
{
display: none;
}
.nav-side-menu ul, .nav-side-menu li
{
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer; /*
.collapsed{
.arrow:before{
font-family: FontAwesome;
content: "\f053";
display: inline-block;
padding-left:10px;
padding-right: 10px;
vertical-align: middle;
float:right;
}
}
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before, .nav-side-menu li :not(collapsed) .arrow:before
{
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active, .nav-side-menu li .active
{
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active, .nav-side-menu li .sub-menu li.active
{
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a, .nav-side-menu li .sub-menu li.active a
{
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li, .nav-side-menu li .sub-menu li
{
background-color: #181c20;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover, .nav-side-menu li .sub-menu li:hover
{
background-color: Orange;
}
.nav-side-menu ul .sub-menu li:before, .nav-side-menu li .sub-menu li:before
{
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li
{
padding-left: 0px;
border-left: 3px solid #2e353d;
border-bottom: 1px solid #23282e;
}
.nav-side-menu li a
{
text-decoration: none;
color: #e1ffff;
}
.nav-side-menu li a i
{
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover
{
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
@media (max-width: 767px)
{
.nav-side-menu
{
position: relative;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn
{
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #000;
width: 40px;
text-align: center;
}
.brand
{
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
@media (min-width: 767px)
{
.nav-side-menu .menu-list .menu-content
{
display: block;
}
}
body
{
margin: 0px;
padding: 0px;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"rel="stylesheet">
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script type="text/javascript">
$(function () {
$('li[data-toggle="collapse"]').each(function () {
$(this).i
if ($(this).next('ul').length == 0) {
$(this).removeAttr('data-toggle').removeAttr('data-target').removeClass('collapsed');
$(this).find('span.arrow').remove();
}
});
$('ul#menuContent > ul').on('show.bs.collapse', function (e, obj) {
$("ul#menuContent > ul").not(this).removeClass("in");
var currentHead = $(this).prev("li");
$("ul#menuContent > li").not(currentHead).removeClass("active");
$(currentHead).addClass("active");
});
});
</script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div class="nav-side-menu">
<div class="brand">
F.B.C. Reserved Area
</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menuContent" ></i>
<div class="menu-list">
<ul id="menuContent" class="menu-content collapse out">
<asp:Repeater ID="rptCategories" runat="server" OnItemDataBound="rptMenu_OnItemBound">
<ItemTemplate>
<li data-toggle="collapse" data-target='#<%#Eval("Menu_Title") %>' class="collapsed">
<a href='<%#Eval("Menu_UrlRewrite") %>'>
<i class='<%#Eval("Menu_CssFont") %>'></i>
<%#Eval("Menu_Title") %><span class="arrow"></span>
</a>
</li>
<asp:Literal ID="ltrlSubMenu" runat="server"></asp:Literal>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
我还将使用应用程序生成的代码插入一个片段，以显示我的代码发生了什么
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>
Fearbetweencrowd Official Website
</title><link rel="shortcut icon" type="image/x-icon" href="../../../img/logo_iconaSito.png" />
<style type="text/css">
.nav-side-menu
{
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #2e353d;
position: fixed;
top: 0px;
width: 300px;
height: 100%;
color: #e1ffff;
}
.nav-side-menu .brand
{
background-color: #23282e;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
}
.nav-side-menu .toggle-btn
{
display: none;
}
.nav-side-menu ul, .nav-side-menu li
{
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer; /*
.collapsed{
.arrow:before{
font-family: FontAwesome;
content: "\f053";
display: inline-block;
padding-left:10px;
padding-right: 10px;
vertical-align: middle;
float:right;
}
}
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before, .nav-side-menu li :not(collapsed) .arrow:before
{
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active, .nav-side-menu li .active
{
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active, .nav-side-menu li .sub-menu li.active
{
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a, .nav-side-menu li .sub-menu li.active a
{
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li, .nav-side-menu li .sub-menu li
{
background-color: #181c20;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover, .nav-side-menu li .sub-menu li:hover
{
background-color: Orange;
}
.nav-side-menu ul .sub-menu li:before, .nav-side-menu li .sub-menu li:before
{
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li
{
padding-left: 0px;
border-left: 3px solid #2e353d;
border-bottom: 1px solid #23282e;
}
.nav-side-menu li a
{
text-decoration: none;
color: #e1ffff;
}
.nav-side-menu li a i
{
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover
{
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
@media (max-width: 767px)
{
.nav-side-menu
{
position: relative;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn
{
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #000;
width: 40px;
text-align: center;
}
.brand
{
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
@media (min-width: 767px)
{
.nav-side-menu .menu-list .menu-content
{
display: block;
}
}
body
{
margin: 0px;
padding: 0px;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"rel="stylesheet">
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script type="text/javascript">
$(function () {
$('li[data-toggle="collapse"]').each(function () {
$(this).i
if ($(this).next('ul').length == 0) {
$(this).removeAttr('data-toggle').removeAttr('data-target').removeClass('collapsed');
$(this).find('span.arrow').remove();
}
});
$('ul#menuContent > ul').on('show.bs.collapse', function (e, obj) {
$("ul#menuContent > ul").not(this).removeClass("in");
var currentHead = $(this).prev("li");
$("ul#menuContent > li").not(currentHead).removeClass("active");
$(currentHead).addClass("active");
});
});
</script>
</head>
<body>
<form method="post" action="./TourModifier.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="ZUgjmhmtBtKTLxWOYW4sJihaVc9bcPoXXRBTjMTRK2LJ4SowfTIsajB2Y19NEfyaJUEkCgQB0AF9cL/fbu8F1z1aNKcaIZE+VXpyuJZ963LG0HcnXlLco/BKSbIQe+pefuqdIdUpmPqjM2ENNn5tTIF6Em078oxQhYeyEsJFtAOMhZL85JjS2rkywJK5TY2UkGQq7V1d3+Adp6QDp46aJQniAgUt3QtfA6N9yo6Ju2QNaFvUC0PCleFu9p9zFcaUBIIXILtY1bwrqKIP5jJagnYZsTZx+hjaBwPaCTHbgaVzjrXTjbmV9Zp448DfyQOC1aAF8UWtc3KmTfaU4NNmtbBzkfrqPDbxa8JlnPoX3+o7cZw0/kwhNEREyUrxaOWlfA1bmlRga1l7fBmuC9HNu3gwdbkXHeSo5+wvvXFIRrUJyajyEypUzOciqIhlLvsv1XJW/3anAnHplDzhZjoRCtzf733Qi8q/KGCpRMj/DXosLHcLG95J2bFDPlF5vhOY" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="4E345808" />
</div>
<div class="nav-side-menu">
<div class="brand">
F.B.C. Reserved Area
</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menuContent" ></i>
<div class="menu-list">
<ul id="menuContent" class="menu-content collapse out">
<li data-toggle="collapse" data-target='#Gestione Sito FBC' class="collapsed">
<a href='javascript:;'>
<i class='glyphicon glyphicon-list'></i>
Gestione Sito FBC<span class="arrow"></span>
</a>
</li>
<ul id='Gestione Sito FBC' class='sub-menu collapse'><li><a href='/TourModifier.aspx'>Tour Modifier</a></li></ul>
<li data-toggle="collapse" data-target='#Tour Modifier' class="collapsed">
<a href='/TourModifier.aspx'>
<i class=''></i>
Tour Modifier<span class="arrow"></span>
</a>
</li>
</ul>
</div>
</div>
</form>
</body>
</html>如您所见，当我打开页面并且单击父菜单项“Gestione Sito FBC”时，子项“Tour Modifier”没有隐藏，“Tour Modifier”项没有消失。
谁能帮我找出我的错误在哪里以及如何纠正它们？谢谢。
解决方案
推荐阅读
- node.js - 并非所有嵌套数组值都显示 MongoDB
- php - 当我尝试在 laravel 中迁移我的表时，我不断收到以下错误
- symfony - symfony 将 LoggerInterface 添加到已经启动的项目中
- visual-studio - 使用摘要身份验证问题在 Visual Studio 中使用 Dynamics NAV Web 服务
- json - Haskell & JSON - 处理 null
- maven - %sh 命令通过 Databrics 中的 notebook 安装 mvn 库
- android - 使用 Kotlin Multiplatform Mobile (KMM) 的多平台应用程序中的 DataBinding 错误
- api-gateway - 自定义 API 网关与反向代理产品
- c++ - openGL 单通道纹理总是采样 0
- ruby-on-rails - 旧版 Rails 模态中的 vuejs 组件