如何使用 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>

...

jquery代码：

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");
});

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

Answer 1

使用 .hide() 而不是 visibilty。隐藏移除 space 已被占用但可见性不会。

$("#languages_more").click(function (e) {
       $("#language_checkbox").show()
});
$(".popup_fullscreen_close").click(function (e) {
       $("#language_checkbox").hide();
});

出于某种原因您想使用 visibilty 然后将高度设置为 0

$("#languages_more").click(function (e) {
      $("#language_checkbox").css({"visibility" :"visible","height":"auto","opacity":"1"});
});
$(".popup_fullscreen_close").click(function (e) {
      $("#language_checkbox").css({"visibility" :"hidden", "height":"0","opacity":"0"});
});

Answer 2

不要使用 visibility，它不会 rise/unrise。

使用display

或者更简单，使用 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');

Answer 3

而不是 $("#language_checkbox").css("visibility", "visible");

使用

$("#language_checkbox").show();

而不是 $("#language_checkbox").css("visibility", "hidden");

使用

$("#language_checkbox").隐藏()

Answer 4

根据visibility:hidden；它会隐藏选择器，但会保留 space，如果你想摆脱 space，那么你必须使用 display:none；隐藏和 display:block；显示。

我已经用几个选项更新了代码

$("#languages_more").on('click', function () {
    $("#language_checkbox").show();
});

$(".popup_fullscreen_close").on('click', function () {
    $("#language_checkbox").hide();
});

或者您可以使用更好的动画素材

$("#languages_more").on('click', function () {
    $("#language_checkbox").fadeIn();
});

$(".popup_fullscreen_close").on('click', function () {
    $("#language_checkbox").fadeOut();
});

或

$("#languages_more").on('click', function () {
    $("#language_checkbox").slideDown();
});

$(".popup_fullscreen_close").on('click', function () {
    $("#language_checkbox").slideUp();
});

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

How to Hide HTML list with jQuery and rise the following inputs?

html

javascript

css

jquery

visibility