Wie um zu zeigen und verstecken eine einfache <ol> Liste mit onclick?

Unter Berücksichtigung der folgenden Absatz und Liste:

<p id = "list1" onclick = "openList1()">List of Items</p>
<ol>
  <li><a href = "/exampleFolder/file1.txt">List Item 1</a></li>
  <li><a href = "/exampleFolder/file2.txt">List Item 2</a></li>
  <li><a href = "/exampleFolder/file3.txt">List Item 3</a></li>
  <li><a href = "/exampleFolder/file4.txt">List Item 4</a></li>
  <li><a href = "/exampleFolder/file5.txt">List Item 5</a></li>
</ol>

Wie kann ich ein-und ausblenden, diese ganze Liste mit Javascript?

<script>
function openList1() {
...
}
</script>

Ich danke Ihnen für die Aufmerksamkeit!

Google "ein-und ausblenden eines div -" und du wirst sehen, viele Möglichkeiten.

InformationsquelleAutor Ericson Willians | 2013-07-10

  1. 5

    Können Sie geben Sie eine id zur OL Liste.

    <p id = "list1" onclick = "openList1()">List of Items</p>
<ol id="ollist">
  <li><a href = "/exampleFolder/file1.txt">List Item 1</a></li>
  <li><a href = "/exampleFolder/file2.txt">List Item 2</a></li>
  <li><a href = "/exampleFolder/file3.txt">List Item 3</a></li>
  <li><a href = "/exampleFolder/file4.txt">List Item 4</a></li>
  <li><a href = "/exampleFolder/file5.txt">List Item 5</a></li>
</ol>

    Und dann in deinem javascript wechseln Sie es so...

    <script>
function openList1() {
    var list = document.getElementById("ollist");

    if (list.style.display == "none"){
        list.style.display = "block";
    }else{
        list.style.display = "none";
    }
}
</script>

    InformationsquelleAutor mohkhan

  2. 2
    var myList = document.getElementsByTagName('ol');
myList[0].style.visibility = 'hidden'; //'visible'

    InformationsquelleAutor DevlshOne

  3. 2
    <script>
function openList1() {
$("ol").toggle();
}
</script>

    Können Sie JQuery verwenden? Wenn ja, versuchen Sie die oben

    InformationsquelleAutor TGH

  4. 1

    Ersten können Sie ändern Ihre Liste:

    <ol id="list" style="display: none;">

    Können Sie eine Funktion schreiben, um zu zeigen:

    function showStuff(id) {
    document.getElementById(id).style.display = 'block';
}
//call function to show your list
showStuff("list");

    Verstecken Ihr element:

    function hideStuff(id) {
    document.getElementById(id).style.display = 'none';
}
//call function to hide your list
hideStuff("list");

    InformationsquelleAutor jh314

  5. 1
    var ol = document.getElementByTagName('ol');
 ol.style.display='none';

    InformationsquelleAutor LanceHub

Schreibe einen Kommentar