jQuery e CSS - Rimuovi / Aggiungi display: nessuno

Ho un div con questa classe:

.news{
  width:710px; 
  float:left;
  border-bottom:1px #000000 solid;
  font-weight:bold;
  display:none;
}

E vorrei con alcuni metodi jQuery rimuovere quel display: nessuno; (così verrà mostrato il div) e poi aggiungerlo di nuovo (così il div sarà ombreggiato).

Come posso farlo? Saluti

Per nascondere il file div

$('.news').hide();

o

$('.news').css('display','none');

e per mostrare div:

$('.news').show();

o

$('.news').css('display','block');

jQuery ti fornisce:

$(".news").hide();
$(".news").show();

È quindi possibile mostrare e nascondere facilmente gli elementi.

Quindi, lascia che ti dia un codice di esempio:

<div class="news">
Blah, blah, blah. I'm hidden.
</div>

<a class="trigger">Hide/Show News</a>

Il collegamento sarà il trigger per mostrare il div quando cliccato. Quindi il tuo Javascript sarà:

$('.trigger').click(function() {
   $('.news').toggle();
});

È quasi sempre meglio lasciare che jQuery gestisca lo stile per nascondere e mostrare gli elementi.

Modifica: vedo che le persone sopra raccomandano di utilizzare .showe .hideper questo. .toggleti permette di fare entrambe le cose con un solo effetto. Quindi va bene.

In JavaScript:

getElementById("id").style.display = null;

In jQuery:

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

Usa l'interruttore per mostrare e nascondere.

$('#mydiv').toggle()

Controlla l'esempio funzionante su http://jsfiddle.net/jNqTa/

Suggerirei di aggiungere una classe per visualizzare / nascondere elementi:

.hide { display:none; }

e quindi usa .toggleClass () di jquery per mostrare / nascondere l'elemento:

$(".news").toggleClass("hide");

L'unico modo per rimuovere un "display: none" inline tramite il css-api di jQuery è resettarlo con la stringa vuota ( nullNON funziona btw !!).

Secondo il documento jQuery questo è il modo generale per "rimuovere" una proprietà di stile inline una volta impostata.

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

o

$("#mydiv").css({display:""});

dovrebbe fare il trucco correttamente.

IMHO c'è un metodo mancante in jQuery che potrebbe essere chiamato "unhide" o "reveal" che invece di impostare semplicemente un'altra proprietà di stile inline ripristina correttamente il valore di visualizzazione come descritto sopra. O forse hide()dovrebbe memorizzare il valore inline iniziale e show()dovrebbe ripristinarlo ...

Le funzioni .show () e .hide () di jQuery sono probabilmente la soluzione migliore.

Non ci stai dando molte informazioni ma in generale questa potrebbe essere una soluzione:

$("div.news").css("display", "block");

Per qualche motivo, l'interruttore non ha funzionato per me e ho ricevuto l'errore uncaught type error toggle is not a functiondurante l'ispezione dell'elemento nel browser. Quindi ho usato il codice seguente e ha iniziato a funzionare per me.

$(".trigger").click(function () {
    $('.news').attr('style', 'display:none');
})

File di script jquery utilizzato jquery-2.1.3.min.js.

Se hai molti elementi che vorresti .hide()o .show(), sprecherai molte risorse per fare quello che vuoi - anche se usi .hide(0)o .show(0)- il parametro 0 è la durata dell'animazione.

A differenza di Prototype.js .hide() e dei .show()metodi che utilizzavano solo per manipolare l'attributo di visualizzazione dell'elemento, l'implementazione di jQuery è più complessa e non è consigliata per un gran numero di elementi.

In questo caso dovresti probabilmente provare .css('display','none')a nascondere e .css('display','')mostrare

.css('display','block') dovrebbe essere evitato, specialmente se stai lavorando con elementi inline, righe di tabella (in realtà qualsiasi elemento di tabella) ecc.

Considerando il commento di lolesque come risposta migliore, puoi aggiungere un attributo o una classe per mostrare / nascondere elementi con proprietà di visualizzazione che differiscono da quelle che normalmente ha, se il tuo sito necessita di retrocompatibilità suggerirei di creare una classe e aggiungerla / rimuoverla per mostrare / visualizza l'elemento

.news-show {
display:inline-block;
}

.news-hide {
display:none;
}

Sostituisci inline-block con il tuo metodo di visualizzazione preferito di tua scelta e usa jquerys addclass https://api.jquery.com/addclass/ e removeclass https://api.jquery.com/removeclass/ invece di show / hide, se al contrario la compatibilità non è un problema, puoi usare attributi come questo.

.news[data-news-visible=show] {
display:inline-block;
}

.news[data-news-visible=hide] {
display:none;
}

E usa jquerys attr () http://api.jquery.com/attr/ per mostrare e nascondere l'elemento.

Qualunque metodo tu preferisca, ti consente di implementare facilmente le animazioni css3 quando mostri / nascondi elementi in questo modo

Usare gli show()add display:blockal posto dei display:hidequali potrebbe rompere le cose.

Per evitare ciò, puoi avere una classe con proprietà display:nonee attivare o disattivare quella classe per quell'elemento con toggleClass().

$("button").on('click', function(event){  $("div").toggleClass("hide"); });

.hide{
   display:none;
}

div{
   width:40px;
   height:40px;
   background:#000;
   margin-bottom:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>
<button>Toggle Box</button>

Nessuna delle risposte ha menzionato questo.