我如何使这个css样式和jquery与Clinic div一样使用Doctor div? 当我像医生div一样做Clinic div时 诊所div已停止,但Doctor div工作正常 那么我怎样才能使这个css风格和jquery与Clinic div一起工作,就像Doctor div一样?
html代码:
<div id="wrap" class="sidebar" >
<div id="sidebar" style="height: 150px;">
<span id="toggleBtn">Doctor</span>
</div>
</div>
<div id="cwrap" class="csidebar" >
<div id="csidebar" style="height: 150px;">
<span id="ctoggleBtn">Clinic</span>
</div>
</div>
CSS代码:
#wrap {
border: solid 1px #ccc;
width: 1355px;
margin: 0 auto;
overflow: hidden;
margin-bottom: 20px;
}
#sidebar {
width: 220px;
position: fixed;
top: 1em;
right: 1em;
border-radius: 5px 5px 5px 5px;
}
#wrap.sidebar #sidebar {
right: -254px;
}
#wrap.sidebar #mainContent, #wrap.sidebar #sidebar {
margin: 10px;
padding: 10px;
box-shadow: 0px 0px 4px #888;
}
.nosidebar #mainContent, #wrap #sidebar {
margin: 10px;
padding: 10px;
box-shadow: 0px 0px 4px #888;
}
#wrap.nosidebar #sidebar {
right: 0;
}
#sidebar #toggleBtn {
width: 60px;
height: 30px;
line-height: 30px;
background: #2191c0;
color: white;
cursor: pointer;
position: absolute;
top: 10px;
left: -60px;
text-align: center;
border-radius: 5px 0 0 5px;
}
#sidebar #toggleBtn:hover {
background: #6eac2c;
}
#cwrap {
border: solid 1px #ccc;
width: 1355px;
margin: 0 auto;
overflow: hidden;
margin-bottom: 20px;
}
#csidebar {
width: 220px;
position: fixed;
top: 1em;
right: 1em;
border-radius: 5px 5px 5px 5px;
}
#cwrap.csidebar #csidebar {
right: -254px;
}
#cwrap.csidebar #cmainContent, #cwrap.csidebar #csidebar {
margin: 10px;
padding: 10px;
box-shadow: 0px 0px 4px #888;
}
.cnosidebar #cmainContent, #cwrap #csidebar {
margin: 10px;
padding: 10px;
box-shadow: 0px 0px 4px #888;
}
#cwrap.cnosidebar #csidebar {
right: 0;
}
#csidebar #ctoggleBtn {
width: 60px;
height: 30px;
line-height: 30px;
background: #2191c0;
color: white;
cursor: pointer;
position: absolute;
top: 50px;
left: -60px;
text-align: center;
border-radius: 5px 0 0 5px;
}
#csidebar #ctoggleBtn:hover {
background: #6eac2c;
}
JQuery代码:
$(document).ready(function() {
// Variables
var objMain = $('#wrap');
var objSidebar = $('#nosidebar');
var objContent = $('#mainContent');
// Show sidebar
function showSidebar() {
objMain.removeClass('nosidebar');
objMain.addClass('sidebar');
objSidebar.animate({ 'right' : '-254px'},'slow');
objContent.animate({ 'margin-right': 270}, 'slow');
$.cookie('sidebar-pref2', 'use-sidebar', { expires: 30 });
}
// Hide sidebar
function hideSidebar() {
objMain.removeClass('sidebar');
objMain.addClass('nosidebar');
objSidebar.animate({ 'right' : '0'},'slow');
objContent.animate({ 'margin-right': 0}, 'slow');
$.cookie('sidebar-pref2', null, { expires: 30 });
}
// Sidebar separator
var objSeparator = $('#toggleBtn');
objSeparator.click(function(e) {
e.preventDefault();
if ( objMain.hasClass('nosidebar') ){
showSidebar();
}
else {
hideSidebar();
}
});
// Load preference
if ( $.cookie('sidebar-pref2') == null ){
objMain.removeClass('sidebar');
}
});