显示隐藏左导航？

Question

我正在处理一个位于屏幕左侧的菜单，并使用位于主内容区域的按钮隐藏/显示菜单。

当屏幕宽度小于768 to时，我使用css隐藏菜单，问题是由于菜单已经隐藏，当用户单击按钮而不是显示菜单时，它又试图隐藏菜单。

我有很多麻烦，试图解释问题，这是现场演示，与所有的代码，我有。

该代码在桌面上运行良好，问题是当屏幕小于768 is时。

这是tham函数，用于显示/隐藏菜单和移动内容。

  $('#menu-toggle').click(function(e)
  {
    e.preventDefault();
    $('#sidebar').toggleClass('show-hide');
    $('#page-content').toggleClass('show-hide');
  });

CSS

.show-hide
{
    margin-left: -250px;
}

完整代码实时演示：https://jsfiddle.net/c7cpLq9m/

Answer 1

刚将其添加到媒体查询中：

#wrapper .show-hide {
  margin-left: 0;
}

​

$('#menu-toggle, .mobile-trigger').click(function(e) {
  e.preventDefault();
  $('#sidebar').toggleClass('show-hide');
  $('#page-content').toggleClass('show-hide');
});

.container-fluid {}

#wrapper {
  padding-left: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.mobile-trigger{
  display: none;
}
#sidebar {
  z-index: 1000;
  position: fixed;
  height: 100%;
  width: 250px;
  overflow-y: auto;
  background: #1b1e24;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.show-hide {
  margin-left: -250px;
}

ul.sidebar-nav {
  list-style: none;
  padding: 0;
}

ul.sidebar-nav li a {
  display: block;
  padding: 10px 25px;
  color: #8b91a0;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 1.1em;
}

ul.sidebar-nav li span {
  padding-right: 10px;
}

ul.sidebar-nav li a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}

#page-content {
  transition: 0.5s;
  /*	position: absolute;     */
  padding-left: 255px;
  /*	width:100%; 			
	background: grey;*/
}

@media ( max-width: 768px) {
  #sidebar {
    margin-left: -250px;
  }
  #wrapper .show-hide{
    margin-left: 0;
  }
  .mobile-trigger{
    display: block;
  }
  #page-content {
    padding-left: 0px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="wrapper">

  <div id="sidebar">
    <ul class="sidebar-nav">
     <li><a class='mobile-trigger' href="#"><span class="glyphicon glyphicon-menu-hamburger"></span> Hide mobile menu</a></li>
      <li class="sidebar-brand"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Contacts</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-picture"></span> Content</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-inbox"></span> Inbound</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Outbound</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-globe"></span> Social</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-folder-close"></span> Automation</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> Reports</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-comment"></span> Feedback</a></li>
    </ul>
  </div>
  <div id="page-content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-6">
          <h1>Duis aute</h1>
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <a href="#" class="btn btn-default" id="menu-toggle" style="float:rigth">Toggle Menu</a>
          <h1>Duis aute</h1>
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <h1>Excepteur</h1>
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <h1>Excepteur</h1>
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <h1>Excepteur</h1>
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <h1>Excepteur</h1>
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="col-lg-6">
          <h1>Excepteur</h1>
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <h1>Excepteur</h1>
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <h1>Excepteur</h1>
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <h1>Excepteur</h1>
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <h1>Excepteur</h1>
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <h1>Excepteur</h1>
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </div>
    </div>
  </div>

</div>
<!-- ./wrapper -->

​

更新

在手机上，如果你不推送内容，那就更好了，因为它看起来会很混乱。最好让菜单覆盖内容，并在菜单中添加一个按钮来关闭它。为此，我在菜单中添加了一个额外的元素，添加了类mobile-trigger，默认情况下，我将其隐藏在桌面上，并使用display: block;在移动平台上显示。还将选择器mobile-trigger添加到单击事件中。

Answer 2

在lonut的回答中，它更好地添加了以下样式：

#menu-toggle {
  position: absolute;
  top: 0;
  right: 10px;
}

若要将切换菜单按钮置于页的右上角，请执行以下操作。