【发布时间】：2016-05-26 15:56:00
【问题描述】：
我已经通过更改 css 文件中的位置尝试了所有可能的方法。当我单击父菜单时，子菜单内容应该可见。即使我修复了导航标签的位置，我也无法在浏览器中看到它。
jQuery(document).ready(function() {
//Open the menu
jQuery("#hamburger").click(function() {
jQuery('#content').css('min-height', jQuery(window).height());
jQuery('nav').css('opacity', 1);
//set the width of primary content container -> content should not scale while animating
var contentWidth = jQuery('#content').width();
//set the content with the width that it has originally
jQuery('#content').css('width', contentWidth);
//display a layer to disable clicking and scrolling on the content while menu is shown
jQuery('#contentLayer').css('display', 'block');
//disable all scrolling on mobile devices while menu is shown
jQuery('#container').bind('touchmove', function(e) {
e.preventDefault()
});
//set margin for the whole container with a jquery UI animation
jQuery("#container").animate({
"marginLeft": ["20%", 'easeOutExpo']
}, {
duration: 100
});
});
//close the menu
jQuery("#contentLayer").click(function() {
//enable all scrolling on mobile devices when menu is closed
jQuery('#container').unbind('touchmove');
//set margin for the whole container back to original state with a jquery UI animation
jQuery("#container").animate({
"marginLeft": ["-1", 'easeOutExpo']
}, {
duration: 100,
complete: function() {
jQuery('#content').css('width', 'auto');
jQuery('#contentLayer').css('display', 'none');
jQuery('nav').css('opacity', 0);
jQuery('#content').css('min-height', 'auto');
}
});
});
});
$(function() {
$("#menu").menu();
});
$('#menu1').click(
function() {
$(this).children('#sub-menu').toggle();
});html {
overflow-y: scroll;
}
body {
margin: 0;
padding: 0;
overflow-x: hidden;
font-family: Arial;
font-size: 18px;
}
header {
background-color: #303030;
padding: 10px;
text-decoration: none;
position: relative;
width: 100%;
z-index: 1;
-webkit-box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
}
#hamburger {
cursor: pointer;
display: block;
height: 24px;
padding: 3px 4px 3px;
position: relative;
width: 25px;
background: linear-gradient(to bottom, #303030 0%, #303030 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#808080', endColorstr='#808080', GradientType=0);
}
#hamburger div {
background-color: #fff;
border: 1px solid #eee;
border-radius: 2px 2px 2px 2px;
height: 2px;
margin-top: 3px;
width: 90%;
}
/*
The navigation container in the background
*/
nav {
opacity: 0;
left: 0px;
top: 0px;
position: fixed;
z-index: 0;
width: 20%;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
background: #808080;
background: -moz-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e3c3d), color-stop(100%, #2d2c2d));
background: -webkit-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: -o-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: -ms-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: linear-gradient(to bottom, #808080 0%, #808080 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#3e3c3d', endColorstr='#2d2c2d', GradientType=0);
}
/*
Style the navigation menu
*/
nav ul {
list-style: none;
margin: 0;
width: 100%;
padding: 0;
}
nav li {
position: fixed;
font-size: 1em;
font-weight: bold;
border-bottom: 1px solid #222222;
border-top: 1px solid #444444;
padding: 15px;
}
nav li a {
color: #fff;
text-decoration: none;
position: fixed;
}
/*
using background color is important to cover the menu
position absolute isset to cover the whole viewport
*/
#content {
background-color: #FFFFFF;
padding: 52px 10px 10px 10px;
position: relative;
/*absolute*/
overflow-x: hidden;
overflow-y: auto;
width: auto;
height: 100%;
/*-webkit-box-shadow: -10px 0px 9px 0px rgba(0, 0, 0, 0.4);*/
/*box-shadow: -10px 0px 9px 0px rgba(0, 0, 0, 0.4);*/
}
/*
The Layer that will be layed over the content
so that the content is unclickable while menu is shown
*/
#contentLayer {
display: none;
height: 100%;
position: absolute;
right: 0;
top: 0;
width: 80%;
z-index: 5;
}
#menu {
position: fixed;
width: 20%;
height: 100%;
background-color: cyan;
text-decoration: underline;
text-decoration-color: black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div id="hamburger">
<div></div>
<div></div>
<div></div>
</div>
</header>
<!--The mobile navigation Markup hidden via css-->
<nav id="menu1">
<ul id="menu">
<li>Dashboard
<ul id="sub-menu">
<li>Network</li>
<li>Datacenter</li>
</ul>
</li>
<li>Monitor
<ul>
<li>Servies</li>
<li>Applications</li>
<li>Datacenter</li>
</ul>
</li>
<li>Configuration
<ul>
<li>Server</li>
<li>Services</li>
<li>Applications</li>
</ul>
</li>
<li>Faults
<ul>
<li>Overview</li>
<li>Active Alarams</li>
<li>Historical Alarams</li>
</ul>
</li>
<li>Maps</li>
<li>Reports</li>
<li>Administration
<ul>
<li>User Managements</li>
<li>Audit logs</li>
<li>Fault Settings</li>
<li>Global Settings</li>
</ul>
</li>
</ul>
</nav>【问题讨论】：
标签： javascript jquery html css css-position