Question

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

当屏幕宽度小于768px时，我使用css隐藏菜单，我遇到的问题是，因为菜单已经隐藏，当用户点击按钮而不是显示菜单时，它试图隐藏菜单了。

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

代码适用于桌面，问题是当屏幕小于768px时。

这是用于显示/隐藏菜单和移动内容的功能

  $('#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添加到click事件中。

Answer 2

在lonut的回答中，更好地添加这些风格：

 data _null_;
   file 'bigfile.csv' dsd ;
   set bigdata;
   put (_all_) (+0);
 run;
 data _null_;
   file 'bigfile.txt' ;
   put 'bigfile.csv written';
 run;

将切换菜单按钮置于页面右上方。

显示隐藏左侧导航？

2 个答案: