如何讓CSS樣式和jquery像Doctor div一樣與Clinic div一起工作？

Question

如何讓CSS樣式和jquery像Doctor div一樣與Clinic div一起工作？ 當我做診所div像醫生div 診所div停止，但博士div正常工作 所以我怎麼可以使這種CSS風格和jQuery與醫生div的診所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'); 
    } 
}); 

Answer 1

試試這個的jsfiddle並告訴如果你想這樣的... ..

http://jsfiddle.net/wWtnC/4/