Как скрыть список HTML с jQuery и поднять следующие входы?

Question

HI ребята это мой 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"); 
}); 

Я могу показать и скрыть этот список, но проблема в том, что, когда я скрыть есть пустое место, и следующие входы не поднимаются. Помощь на подходе

Answer 1

.hide() не visibilty. hide удаляет место, но visibilty не делает.

$("#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

Dont использовать visibility, он не поднимается/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(); 
       }); 

FYI .hide() эквивалентно .css('display', 'none');

Answer 3

вместо $ ("# language_checkbox"). CSS (» видимость "," видимая ");

использование

$ ("# language_checkbox") шоу().

И вместо $ ("# language_checkbox"). Css («видимость», «скрытая»);

использование

$ ("# language_checkbox") скрыть()

Answer 4

По видимости:. Скрытом; он скроет селектор, но сохранит пробел, если вы хотите избавиться от пространства, тогда вы должны использовать display: none; скрыть и отобразить: 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(); 
});