Question

我有一个位于右下方的对话框，我正在尝试使用简单的jQuery hide / show来最小化它。它在很大程度上起作用，但.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>

Answer 2

尝试隐藏x_container而不是x_header，或者为x_header的父div命名并隐藏它。

这似乎是唯一没有隐藏在代码中的东西。

Answer 3

这些元素上有一个边框，不会被隐藏。请尝试以下

.x_container{
border-left: 0px solid #fff;
border-top: 0px solid #fff;
border-right: 0px solid #fff;
}

Answer 4

您可以直接显示和隐藏function toggle_close() { $('.x_container').hide() $("#x_close").hide(); $("#x_open").show(); } function toggle_open() { $('.x_container').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>

.col-md-4 {
  padding: 0;
}

jQuery CSS .hide不完整

4 个答案: