it-swarm.com.de

Wie starte ich meine JQuery als versteckt?

Ich habe einen Code, der drei Bilder und ein entsprechendes Div unter jedem Bild anzeigt. Mit der jquery .toggle Funktion habe ich es so gemacht, dass jedes div umschaltet, wenn auf das Bild darüber geklickt wird. Gibt es eine Möglichkeit, dies so zu gestalten, dass die Divs als versteckt beginnen?

Vielen Dank für Ihre Zeit,

CODE FÜR REFERENZEN:

    <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#picOne").click(function(){
$("#one").toggle(250);


 });

$("#picTwo").click(function(){
    $("#two").toggle(250);
  });


  $("#picThree").click(function(){
    $("#three").toggle(250);
  });

});
</script>
</head>

<body>


    <center>
    <h2>Smooth Transitions</h2>


    <img src="one.png" id="picOne">
        <div id="one">
        <p>first paragraph.</p>
        </div>

    <img src="two.png" id="picTwo">

        <div id="two" visibility="hidden">
        <p>Second Pair of giraffe.</p>
        </div>


    <img src="three.png" id="picThree">

        <div id="three">
        <p>Thiird paragraph.</p>
        </div>



</center>
</body>
</html> 
43
John

visibility ist eine css Eigenschaft. Aber Anzeige ist, was Sie auf jeden Fall wünschen

<div id="two" style="display:none;">
  <p>Second Pair of giraffe.</p>
</div>

Oder verwerfen Sie das Inline-CSS und geben Sie jedem Div eine CSS-Klasse, die umgeschaltet werden soll

<div id="two" class="initiallyHidden">

und dann

.initiallyHidden { display: none; }

Und Sie können Ihre jQuery auch ein wenig aufräumen. Geben Sie Ihren umschaltbaren Bildern eine CSS-Klasse

    <img src="one.png" class="toggler">
    <div>
    <p>first paragraph.</p>
    </div>

Und dann

$("img.toggler").click(function(){
    $(this).next().toggle(250);
});

Dies würde Ihren Bedarf an all diesen IDs verringern und diese Lösung außerdem viel, viel erweiterbarer machen.

Und um dynamisch hinzugefügte Inhalte zu verarbeiten, können Sie on anstelle von click verwenden.

$(document).on("click", "img.toggler", function(){
    $(this).next().toggle(250);
});

(Um eine bessere Leistung zu erzielen, vergewissern Sie sich, dass sich alle diese umschaltbaren Bilder in einem Container div befinden, der beispielsweise den Namen containerFoo trägt. Führen Sie dann $("#containerFoo").on anstelle von $(document).on( aus.

63
Adam Rackis

Mit CSS:

#one, #two, #three { display: none; }

Mit jQuery

$(function() {  //once the document is ready
  $('h2').nextAll('img') //select all imgs following the h2
    .find('div')  //select all contained divs
    .hide();
})

Übrigens sollten Sie anstelle von ID-Selektoren wahrscheinlich Klassen verwenden

7
George Mauer

Einfach hinzufügen style="display: none;" an die div. Dies startet die Div-Klasse als versteckt.

Wenn die jQuery den Block umschaltet, wird der Stil in Block geändert

3
<style>
.reply {
    display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("form").toggle();
    });
});
</script>
</head>
<body>

<button>Toggle between hiding and showing the paragraphs</button>

<form action="#" class="row m0 comment_form reply" >
  <h5>post your comment:</h5>
  <textarea class="form-control"></textarea>
  <input type="submit" value="submitnow" class="btn btn default">
  </form>
0
Ranjith Kumar