jquery - 我如何使这种 css 样式和 jquery 像 Doctor div 一样与 Clinic div 一起工作？

Question

我如何使这种 css 样式和 jquery 像 Doctor div 一样与 Clinic div 一起工作？当我像 Doctor div 一样做 Clinic div 时Clinic div 停止但 Doctor div 正常工作那么我如何使这种 css 样式和 jquery 像 Doctor div 一样与 Clinic 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/