javascript - jQuery CSS .hide 不完整

Question

我有一个对话框位于右下角，我正在尝试使用简单的 jQuery 隐藏/显示来最小化它。它在大多数情况下都有效，但 .x_container 并没有完全隐藏。有一条 1px 的白线仍然存在。我的代码有什么问题吗？

function toggle_close() {
    $("#x_header").hide();
    $("#x_mainbody").hide();
    $("#x_footer").hide();
    $("#x_close").hide();
    $("#x_open").show();       
}
function toggle_open() {
    $("#x_header").show();
    $("#x_mainbody").show();
    $("#x_footer").show();
    $("#x_close").show();
    $("#x_open").hide();       
}

.x_screen {
        position: relative;
    }
    .x_container {
        position: fixed;
        bottom: 0;
        right: 20%;
        width: 250px;
        max-height: 600px;
        border-left: 1px solid #fff;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        background-color: #ffffff;
    }
    .x_header {
        float: left;
        height: 20px;
        width: 210px;
        background-color: #ccc;
        border-bottom: 1px solid #000;
        padding: 5px;
    }
    .x_close {
        float: right;
        height: 20px;
        width: 20px;
        background-color: #ccc;
        border-bottom: 1px solid #000;
        padding: 5px;
    }
    .x_mainbody {
        margin-top: 0;
        width: 240px;
        min-height: 400px;
        max-height: 560px;
        overflow: auto;
        padding: 5px;
    }
    .x_footer {
        height: 20px;
        width: 240px;
        background-color: whiteSmoke;
        border-top: 1px solid #DDD;
        padding: 5px;
    }
    .x_screen2 {
        position: relative;
    }
    .x_container2 {
        position: fixed;
        bottom: 0;
        right: 20%;
        width: 20px;        
    }
    .x_open {
        float: right; 
        height: 20px;
        width: 20px;
        background-color: whiteSmoke;
        border-left: 1px solid #fff;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        padding: 5px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="x_screen">
    <div class="x_container">
        <div><div id="x_header" class="x_header">Header</div><div id="x_close" onclick="toggle_close()" class="x_close">[x]</div></div>
        <div id="x_mainbody" class="x_mainbody">
            <p>Body</p>
        </div>
        <div id="x_footer" class="x_footer">Footer</div>
    </div>
</div>
<div class="x_screen2">
    <div class="x_container2">
        <div id="x_open" onclick="toggle_open()" class="x_open" style="display:none;">[*]</div>
    </div>
</div>

Answer 1

问题..是你还没有隐藏 .x_container 类。

如果您的目的只是最小化，则无需隐藏容器内的所有元素。它仅适用于隐藏 x_container。

    function toggle_close() {
        // $("#x_header").hide();
        // $("#x_mainbody").hide();
        // $("#x_footer").hide();
        // $("#x_close").hide();
        $(".x_container").hide();
        $("#x_open").show();        
    }
    function toggle_open() {
        $(".x_container").show();
        // $("#x_header").show();
        // $("#x_mainbody").show();
        // $("#x_footer").show();
        // $("#x_close").show();
        $("#x_open").hide();        
    }

    .x_screen {
        position: relative;
    }
    .x_container {
        position: fixed;
        bottom: 0;
        right: 20%;
        width: 250px;
        max-height: 600px;
        border-left: 1px solid #fff;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        background-color: #ffffff;
    }
    .x_header {
        float: left;
        height: 20px;
        width: 210px;
        background-color: #ccc;
        border-bottom: 1px solid #000;
        padding: 5px;
    }
    .x_close {
        float: right;
        height: 20px;
        width: 20px;
        background-color: #ccc;
        border-bottom: 1px solid #000;
        padding: 5px;
    }
    .x_mainbody {
        margin-top: 0;
        width: 240px;
        min-height: 400px;
        max-height: 560px;
        overflow: auto;
        padding: 5px;
    }
    .x_footer {
        height: 20px;
        width: 240px;
        background-color: whiteSmoke;
        border-top: 1px solid #DDD;
        padding: 5px;
    }
</style>
<style type="text/css">
    .x_screen2 {
        position: relative;
    }
    .x_container2 {
        position: fixed;
        bottom: 0;
        right: 20%;
        width: 20px;        
    }
    .x_open {
        float: right; 
        height: 20px;
        width: 20px;
        background-color: whiteSmoke;
        border-left: 1px solid #fff;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        padding: 5px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="x_screen">
    <div class="x_container">
        <div><div id="x_header" class="x_header">Header</div><div id="x_close" onclick="toggle_close()" class="x_close">[x]</div></div>
        <div id="x_mainbody" class="x_mainbody">
            <p>Body</p>
        </div>
        <div id="x_footer" class="x_footer">Footer</div>
    </div>
</div>
<div class="x_screen2">
    <div class="x_container2">
        <div id="x_open" onclick="toggle_open()" class="x_open" style="display:none;">[*]</div>
    </div>
</div>