2
嘿，我構建到offcanvas側邊欄，其中一個是在右側，icludes正常菜單關閉webapp，第二個應該是通知邊欄，問題是，剩下一個工作完美。當我點擊漢堡包圖標時，它會打開左邊欄，但是當我點擊其他圖標時，沒有任何反應，右邊欄不會打開，並且谷歌瀏覽器chonsole不顯示任何錯誤。javascript函數只打開一個offcanva菜單
第一個是鏈接希望打開左邊欄，至今工作。正確的是通知邊欄，不打開。
<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);
}