Wie kann ich mit jQuery keine CSS-Anzeige ändern oder Eigenschaften blockieren?

429

jquery jquery-selectors ENTWICKELT
quelle

923

Der richtige Weg, dies zu tun, ist zu verwenden showund hide:

$('#id').hide();
$('#id').show();

Eine alternative Möglichkeit ist die Verwendung der jQuery- CSS- Methode:

$("#id").css("display", "none");
$("#id").css("display", "block");

djdd87
quelle

@GenericTypeTea: Wird #idfür IDs verwendet. Was ist, wenn ich verwenden möchte class?

AabinGunz

26

$(".class").css("display", "none");

djdd87

8

Ich habe es versucht $('#id').css('display', 'none');, aber es hat nicht funktioniert. Die Verwendung $('#id').css('color', 'red');funktioniert jedoch. Ich bin mir jedoch nicht sicher warum. Hat jemand irgendwelche Ideen? Danke im Voraus.

David

5

Es lohnt sich auch, den Unterschied zwischen $ ('# id'). Hide () und $ ("# id"). CSS ("display", "none") in diese Antwort aufzunehmen.

ManirajSS

1

Es gibt einen Unterschied zwischen zwei, bei denen die erstere Funktion nur den Text verbirgt und keinen von einem Element belegten Platz freigibt, während die letztere den Inhalt verbirgt und den vom cocern-Element belegten Platz freigibt

Dila Gurung

110

Es gibt verschiedene Möglichkeiten, dies zu erreichen, jede mit ihrem eigenen beabsichtigten Zweck.

1. ) Inline verwenden, während einem Element einfach eine Liste der zu erledigenden Aufgaben zugewiesen wird

$('#ele_id').css('display', 'block').animate(....
$('#ele_id').css('display', 'none').animate(....

2. ) Zum Festlegen mehrerer CSS-Eigenschaften

$('#ele_id').css({
    display: 'none'
    height: 100px,
    width: 100px
});
$('#ele_id').css({
    display: 'block'
    height: 100px,
    width: 100px
});

3. ) Auf Befehl dynamisch aufrufen

$('#ele_id').show();
$('#ele_id').hide();

4. ) Dynamisch zwischen Block und keinem umschalten, wenn es sich um ein Div handelt

Einige Elemente werden je nach Ta g N ame als Inline, Inline-Block oder Tabelle angezeigt

$ ('# ele_id'). toggle ();

SpYk3HH
quelle

27

Wenn die Anzeige des div standardmäßig blockiert ist, können Sie einfach .show()und .hide()oder noch einfacher .toggle()zwischen den Sichtbarkeit wechseln.

reko_t
quelle

Richtig, die Anzeige wird auf das eingestellt, was sie ursprünglich war, was blockiert oder etwas anderes sein könnte.

Danielgwood

9

Zum Verstecken:

$("#id").css("display", "none");

Zur Show:

$("#id").css("display", "");

Phanikumar Jatavallabhula
quelle

6

Andere Möglichkeit, dies mit der jQuery CSS-Methode zu tun:

$("#id").css({display: "none"});
$("#id").css({display: "block"});

Miguel
quelle

5

Einfacher Weg:

function displayChange(){
$(content_id).click(function(){
  $(elem_id).toggle();}

)}

user3726824
quelle

Eine Erklärung wäre angebracht.

Peter Mortensen

2

(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);

Pham
quelle

Eine Erklärung wäre angebracht.

Peter Mortensen

2

Wenn Sie ein Element ein- und ausblenden möchten, je nachdem, ob es bereits sichtbar ist oder nicht, können Sie anstelle von .hide()und die Option umschalten.show()

$('elem').toggle();

Vladimir verleg
quelle

1

.hide () funktioniert in Chrome nicht für mich.

Dies funktioniert zum Verstecken:

var pctDOM = jQuery("#vr-preview-progress-content")[0];
pctDOM.hidden = true;

jimver04
quelle

0

In meinem Fall habe ich Elemente eines Formulars ein- / ausgeblendet, je nachdem, ob ein Eingabeelement leer war oder nicht, sodass beim Ausblenden der Elemente das Element, das den ausgeblendeten Elementen folgte, neu positioniert wurde und seinen Platz einnahm, musste ein float ausgeführt werden: left des Elements eines solchen Elements. Selbst wenn ein Plugin als abhängig verwendet wurde, musste float verwendet werden.

user2341112
quelle

0

Benutze das:

$("#id").(":display").val("block");

Oder:

$("#id").(":display").val("none");

Trikaldarshi
quelle

Ich habe ein Problem, es funktioniert nicht für mich :(.

<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>

Jaibalaji

0

Verwenden:

$(#id/.class).show()
$(#id/.class).hide()

Dieser ist der beste Weg.

Saeed Ahmed
quelle

Wie kann ich mit jQuery keine CSS-Anzeige ändern oder Eigenschaften blockieren?

Antworten: