Odpowiedzi:
Prawidłowym sposobem na to jest użycie show
i hide
:
$('#id').hide();
$('#id').show();
Alternatywnym sposobem jest użycie metody css jQuery :
$("#id").css("display", "none");
$("#id").css("display", "block");
$(".class").css("display", "none");
$('#id').css('display', 'none');
, ale to nie działało. Jednak korzystanie $('#id').css('color', 'red');
działa. Nie jestem jednak pewien, dlaczego. Czy ktoś ma jakieś pomysły? Z góry dziękuję.
Istnieje kilka sposobów osiągnięcia tego celu, każdy z własnym przeznaczeniem.
1. ) Aby użyć inline , po prostu przypisując elementowi listę rzeczy do zrobienia
$('#ele_id').css('display', 'block').animate(....
$('#ele_id').css('display', 'none').animate(....
2. ) Do użycia podczas ustawiania wielu właściwości CSS
$('#ele_id').css({
display: 'none'
height: 100px,
width: 100px
});
$('#ele_id').css({
display: 'block'
height: 100px,
width: 100px
});
3. ) Aby dynamicznie wywoływać polecenie
$('#ele_id').show();
$('#ele_id').hide();
4. ) Aby dynamicznie przełączać się między blokiem a brakiem, jeśli jest to div
$ ('# ele_id'). toggle ();
Jeśli wyświetlacz div blok jest domyślnie, można po prostu użyć .show()
i .hide()
czy nawet prostsze, .toggle()
aby przełączać się między widoczności.
Do ukrycia:
$("#id").css("display", "none");
Na pokaz:
$("#id").css("display", "");
Prosta droga:
function displayChange(){
$(content_id).click(function(){
$(elem_id).toggle();}
)}
(function($){
$.fn.displayChange = function(fn){
$this = $(this);
var state = {};
state.old = $this.css('display');
var intervalID = setInterval(function(){
if( $this.css('display') != state.old ){
state.change = $this.css('display');
fn(state);
state.old = $this.css('display');
}
}, 100);
}
$(function(){
var tag = $('#content');
tag.displayChange(function(obj){
console.log(obj);
});
})
})(jQuery);
Jeśli chcesz ukryć i pokazać element, w zależności od tego, czy jest już widoczny, czy nie, możesz użyć przełącznika zamiast .hide()
i.show()
$('elem').toggle();
W moim przypadku pokazywałem / ukrywałem elementy formularza w zależności od tego, czy element wejściowy był pusty, czy nie, tak więc podczas ukrywania elementów element za ukrytymi był zmieniany, zajmując jego przestrzeń, konieczne było wykonanie pływaka: left elementu takiego elementu. Nawet przy użyciu wtyczki, w zależności od tego, konieczne było użycie pływaka.
Użyj tego:
$("#id").(":display").val("block");
Lub:
$("#id").(":display").val("none");
<style> #choosepath { display: none; } </style> <script> $(document).ready(function () { $('#btn_journey').click(function () { alert("button click"); $('#choosepath').css({"display":"normal"}); }); }); </script> </head> <body> <a href="#" class="btn btn-primary btn-lg" id="btn_journey">Start your journey</a> <div class="col-lg-3 col-md-6 mb-4" id="choosepath"> </div> </body></html>
Posługiwać się:
$(#id/.class).show()
$(#id/.class).hide()
To jest najlepszy sposób.
#id
używane dla identyfikatorów, a jeśli chcę użyćclass
?