2
私はオフキャンバスのサイドバーにビルドしています。右側には1つあり、webappから通常のメニューが表示され、2つ目は通知サイドバーになります。左は完璧に働いています。ハンバーガーアイコンをクリックすると、左側のサイドバーが開きますが、他のアイコンをクリックしても何も起こりません。右側のサイドバーが開きません。また、Google Chromeのchonsoleがエラーを表示しません。javascriptの機能は1つのオフキャンバメニューしか開きません
最初のリンクは、これまでのところ動作する左サイドバーを開くことです。右のものは通知サイドバーのためのもので、開かない。
<a href="#" id="open-pulse-sidebar"><i class="icon-menu circle-icon"></i></a>
<a href="#" id="open-notification-sidebar"><i class="icon-globe circle-icon"></i></a>
左側のサイドバーの作業
<div class="pulse-sidebar">
<div class="sidebar-bg clearfix">
<div class="sidebar-profile">
<img src="img/users/avatar.jpg" class="sidebar-img" alt="Candice Swanepoel" title="Candice Swanepoel" />
<h5>Candice Swanepoel</h5>
</div>
</div>
<ul>
<li><a href="#">Dashboard</a></li>
<li><a href="#">Models</a></li>
<li><a href="#">Kunden</a></li>
<li><a href="#">Finanzen</a></li>
<li><a href="#">Mitarbeiter</a></li>
<li><a href="#">Einstellung</a></li>
</ul>
<div class="sidebar-logout">
<a href="#">
<i class="icon-logout circle-icon"></i>
<h5>Logout</h5>
</a>
</div>
</div>
、右サイドバーのHTMLのHtmlの - それは
<div class="notification-sidebar">
<ul>
<li><a href="#">Dashboard</a></li>
<li><a href="#">Models</a></li>
<li><a href="#">Kunden</a></li>
<li><a href="#">Finanzen</a></li>
<li><a href="#">Mitarbeiter</a></li>
<li><a href="#">Einstellung</a></li>
</ul>
</div>
の中で、ダミーの内容はここに私のjavascriptのであるましたと彼らのためのCSS
// Toogle Pulse Sidebar
$('#open-pulse-sidebar').click(function() {
$('.pulse-sidebar').toggleClass('active')
})
$(document).click(function(e) {
var sidebar = $(".pulse-sidebar, #open-pulse-sidebar");
if (!sidebar.is(e.target) && sidebar.has(e.target).length === 0) {
sidebar.removeClass('active')
}
});
// Toogle Notification Sidebar
$('#open-notification-sidebar').click(function() {
$('.notification-sidebar').toggleClass('active')
})
$(document).click(function(e) {
var sidebar = $(".notification-sidebar, #open-notification-sidebar");
if (!sidebar.is(e.target) && sidebar.has(e.target).length === 0) {
sidebar.removeClass('active')
}
});
CSS
.pulse-sidebar {
height: 100%;
width: 19.24em;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
background-color: #fff;
overflow-x: hidden;
transform: translateX(-120%);
transition: all 0.4s ease-in;
-webkit-box-shadow: 2px 0px 13px 0px rgba(0,0,0,0.4);
-moz-box-shadow: 2px 0px 13px 0px rgba(0,0,0,0.4);
box-shadow: 2px 0px 13px 0px rgba(0,0,0,0.4);
}
.notification-sidebar {
height: 100%;
width: 19.24em;
position: fixed;
z-index: 9999;
top: 0;
right: 0;
background-color: #fff;
overflow-x: hidden;
transform: translateX(120%);
transition: all 0.4s ease-in;
-webkit-box-shadow: 2px 0px 13px 0px rgba(0,0,0,0.4);
-moz-box-shadow: 2px 0px 13px 0px rgba(0,0,0,0.4);
box-shadow: 2px 0px 13px 0px rgba(0,0,0,0.4);
}