单击导航抽屉引导程序时未显示侧导航栏
Posted
技术标签:
【中文标题】单击导航抽屉引导程序时未显示侧导航栏【英文标题】：Side Navigation Bar not showing on click of Navigation drawer Bootstrap 【发布时间】：2015-09-19 09:51:31 【问题描述】：我正在尝试使用引导程序使导航抽屉工作，类似于http://bdinfosys.com/demo/materialx/。我有一个主导航栏，我已经能够获得移动屏幕的导航抽屉。我创建了一个默认隐藏的侧边栏。单击抽屉时，我希望出现我的侧导航栏并且不存在主导航栏的内容。但是目前当我点击抽屉时，我的侧边导航没有显示，我的主导航栏的所有选项仍然存在。
我的 html 页面来源：
<body>
<div class="navbar navbar-inverse navbar-fixed-top" id="primary-nav">
<div class="container"> <a href="#" class="navbar-brand hidden-xs">MyName</a>
<button id="menu-toggle" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">ABOUT ME<span class="sr-only">(current)</span></a>
</li>
<li><a href="#">RESUME</a>
</li>
<li><a href="#">PROJECTS</a>
</li>
<li><a href="#">BLOG</a>
</li>
<li><a href="#">CONTACT</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container" id="mobile_sideNav">
<div class="row profile">
<div class="col-md-3">
<div class="profile-sidebar">
<!-- SIDEBAR USERPIC -->
<div class="profile-userpic">
<img src="http://keenthemes.com/preview/metronic/theme/assets/admin/pages/media/profile/profile_user.jpg" class="img-responsive" >
</div>
<!-- END SIDEBAR USERPIC -->
<!-- SIDEBAR USER TITLE -->
<div class="profile-usertitle">
<div class="profile-usertitle-name">
Marcus Doe
</div>
<div class="profile-usertitle-job">
Developer
</div>
</div>
<!-- END SIDEBAR USER TITLE -->
<!-- SIDEBAR BUTTONS -->
<div class="profile-userbuttons">
<button type="button" class="btn btn-success btn-sm">Follow</button>
<button type="button" class="btn btn-danger btn-sm">Message</button>
</div>
<!-- END SIDEBAR BUTTONS -->
<!-- SIDEBAR MENU -->
<div class="profile-usermenu">
<ul class="nav">
<li class="active">
<a href="#">
<i class="glyphicon glyphicon-home"></i>
Overview </a>
</li>
<li>
<a href="#">
<i class="glyphicon glyphicon-user"></i>
Account Settings </a>
</li>
<li>
<a href="#" target="_blank">
<i class="glyphicon glyphicon-ok"></i>
Tasks </a>
</li>
<li>
<a href="#">
<i class="glyphicon glyphicon-flag"></i>
Help </a>
</li>
</ul>
</div>
<!-- END MENU -->
</div>
</div>
<div class="col-md-9">
<div class="profile-content">
Some user related content goes here...
</div>
</div>
</div>
</div>
</body>
我的 javascript 源代码：
function detectmob()
if( navigator.userAgent.match(/android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
)
return true;
else
return false;
$(document).ready(function()
$("#mobile_sideNav").hide();
if(detectmob())
$("#primary-nav").hide();
);
$("#menu-toggle").click( function()
$("#mobile_sideNav").show();
);
我的 CSS：
body
padding-top: 70px;
html, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
.brand-bg, .sweet-alert button
background-color: #00bcd4 !important;
.projects-wrap
padding: 110px 0;
.root-sec
position: relative;
.main-section
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
/* Profile container */
.profile
margin: 20px 0;
/* Profile sidebar */
.profile-sidebar
padding: 20px 0 10px 0;
background: #fff;
.profile-userpic img
float: none;
margin: 0 auto;
width: 50%;
height: 50%;
-webkit-border-radius: 50% !important;
-moz-border-radius: 50% !important;
border-radius: 50% !important;
.profile-usertitle
text-align: center;
margin-top: 20px;
.profile-usertitle-name
color: #5a7391;
font-size: 16px;
font-weight: 600;
margin-bottom: 7px;
.profile-usertitle-job
text-transform: uppercase;
color: #5b9bd1;
font-size: 12px;
font-weight: 600;
margin-bottom: 15px;
.profile-userbuttons
text-align: center;
margin-top: 10px;
.profile-userbuttons .btn
text-transform: uppercase;
font-size: 11px;
font-weight: 600;
padding: 6px 15px;
margin-right: 5px;
.profile-userbuttons .btn:last-child
margin-right: 0px;
.profile-usermenu
margin-top: 30px;
.profile-usermenu ul li
border-bottom: 1px solid #f0f4f7;
.profile-usermenu ul li:last-child
border-bottom: none;
.profile-usermenu ul li a
color: #93a3b5;
font-size: 14px;
font-weight: 400;
.profile-usermenu ul li a i
margin-right: 8px;
font-size: 14px;
.profile-usermenu ul li a:hover
background-color: #fafcfd;
color: #5b9bd1;
.profile-usermenu ul li.active
border-bottom: none;
.profile-usermenu ul li.active a
color: #5b9bd1;
background-color: #f6f9fb;
border-left: 2px solid #5b9bd1;
margin-left: -2px;
/* Profile Content */
.profile-content
padding: 20px;
background: #fff;
min-height: 460px;
编辑：
我认为我检测它是否是移动屏幕的方式并不是解决此问题的最佳方法，因为我正在桌面浏览器上进行测试。可能更好的方法是检查屏幕尺寸
【问题讨论】：
【参考方案1】：您是否尝试过将位置设置为固定，然后为 css 设置动画以滑入视图。像这样的东西：http://daviddataram.com/Portfolio_Sites/combatStress/index.html。 通过在css中设置大小和位置，当用户点击图标时，使用jquery将菜单滑动到屏幕上：
$('#wrapper').click(function()
$('#wrapper').css('direction of screen' , 'width of wrapper')
【讨论】：
以上是关于单击导航抽屉引导程序时未显示侧导航栏的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 angularjs 操作导航栏引导程序 4 崩溃？