javascript - 当我单击菜单时，子菜单部分不可见？

标签 javascript jquery html css css-position

我已经通过更改 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>

最佳答案

试试这个

jQuery(document).ready(function() {
  //Open the menu
  jQuery("#hamburger").click(function() {

    jQuery('#content').css('min-height', jQuery(window).height());

    var t = jQuery('nav').css('opacity');
    jQuery('nav').css('opacity', t == 1 ? 0 : 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');

      }
    });
  });

});
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
*/

/*
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;
}
ul {
  list-style: none;
}
#menu {
  position: fixed;
  width: 30%;
  height: 100%;
  padding-top: 40px;
  background-color: cyan;
  text-decoration: underline;
  text-decoration-color: black;
}
.sub-menu {
  display: none;
}
.menuItem:hover .sub-menu {
  display: block;
}
<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 class="menuItem">Dashboard
      <ul class="sub-menu">
        <li>Network</li>
        <li>Datacenter</li>
      </ul>
    </li>
    <li class="menuItem">Monitor
      <ul class="sub-menu">
        <li>Servies</li>
        <li>Applications</li>
        <li>Datacenter</li>
      </ul>
    </li>
    <li class="menuItem">Configuration
      <ul class="sub-menu">
        <li>Server</li>
        <li>Services</li>
        <li>Applications</li>
      </ul>
    </li>
    <li class="menuItem">Faults
      <ul class="sub-menu">
        <li>Overview</li>
        <li>Active Alarams</li>
        <li>Historical Alarams</li>
      </ul>
    </li>
    <li class="menuItem">Maps</li>
    <li class="menuItem">Reports</li>
    <li class="menuItem">Administration
      <ul class="sub-menu">
        <li>User Managements</li>
        <li>Audit logs</li>
        <li>Fault Settings</li>
        <li>Global Settings</li>
      </ul>
    </li>
  </ul>
</nav>

关于javascript - 当我单击菜单时，子菜单部分不可见？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37453084/

上一篇：javascript - jquery数据表excel导出按钮不显示

下一篇：javascript - 在模态弹出窗口中加载 d3 图表时，d3.v3.min.js :1 Error: <svg> attribute height: Expected length, "NaN"

相关文章：

javascript - JQuery - 单击复选框容器有效，单击复选框无效

html - select2 所需的选择器

javascript - javascript 中的闰秒在哪里？

javascript - jQuery、Ajax 并获取完整的 html 结构

javascript - 当只有一个应该在点击时改变时，所有愿望 list 项目的文本都会改变

php - 图片文件权限不起作用

html - 样式和中心 Stripe 按钮

jquery - 如何使用 jQuery 删除标签内容的前 6 个字符？

javascript - 数组的迭代器

javascript - 如何在 javaScript 中使用 indexof 从倒数第二个索引中获取字符？

©2024 IT工具网  联系我们