javascript - 如何使用 jQuery 隐藏 HTML 列表并增加以下输入？

Question

大家好，这是我的 Html 代码:

<ul id="var_language_short">
    <li id="languages_more"><label class="form_present_trigger">More</label></li>
</ul>
<div id="language_checkbox" class="popup_fullscreen">
    <div class="popup_fullscreen_close">close</div>
    <ul id="var_language_long">
    </ul>
</div>
<div class="form_present_row">
    <span class="form_present_title">
        <label class="form_present_title_label" for="var_prixPlat">Prix moyen 
                d'un plat<span class="req" title="Required">*</span></label>
    </span>
    <div class="form_present_content">
        <span class="form_present_update">
            <input class="form_present_input var_prixPlat" type="text" id="var_prixPlat" />
        </span>
    </div>
</div>

...

j查询代码:

var list_Tyepe_Restaurant = document.getElementById('iType')
                            .contentWindow.document.body.innerHTML;
$("#var_language_long").html(list_Tyepe_Restaurant);    
$("#languages_more").click(function (e) {
    $("#language_checkbox").css("visibility", "visible");
    $("#language_checkbox").css("opacity", "1");
});
$(".popup_fullscreen_close").click(function (e) {
    $("#language_checkbox").css("opacity", "0");
    $("#language_checkbox").css("visibility", "hidden");
});

我可以显示和隐藏这个列表，但问题是当我隐藏它时有一个空白空间并且下面的输入不会上升。请求帮助

Answer 1

不要使用visibility，它不会上升/不上升。

使用显示

或者更简单，使用 show() 和 hide()

var list_Tyepe_Restaurant = document.getElementById('iType').contentWindow.document.body.innerHTML;
 $("#var_language_long").html(list_Tyepe_Restaurant);    
$("#languages_more").click(function (e) {
                    $("#language_checkbox").show();
                });
$(".popup_fullscreen_close").click(function (e) {
                    $("#language_checkbox").hide();
                });

仅供引用 .hide() 等同于 .css('display', 'none');