Problem display div mittels klick durch Javaskript von Gunnar Bittersmann, 08.12.2016 07:10

Problem display div mittels klick durch Javaskript

AMG 07.12.2016 23:04

Guten Tag, Das hier ist mein erster Beitrag, falls ich irgend was falsch mache bitte ich um Nachsicht...

Hier mein html file:

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Amatic+SC:400,700|Bungee+Shade|Creepster|Lobster|Open+Sans+Condensed:300,300i,700|Poiret+One">
    <link rel="stylesheet" href="/css/uns.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="../js/menu.js" type="text/javascript"></script>
    <title>Startseite</title>  
  </head>


  <body>
      <div id="backr">
          <br style="text-size: 1px ;">
          <table id="navi">
              <tr>
                  <th>
                      <a href="../index.html" style="text-decoration: none ; color: inherit ; "><i class="fa fa-university" aria-hidden="true"></i>Startseite<i class="fa fa-university" aria-hidden="true"></i></a></th>
                  <th>
                      <i class="fa fa-users" aria-hidden="true"></i> Über die Crew <i class="fa fa-users" aria-hidden="true"></i></th>
                  <th>
                      <div class="dropdown" onclick="showmen()">
                          <button class="dropbtn"><i class="fa fa-camera" aria-hidden="true"></i> Bilder <i class="fa fa-camera" aria-hidden="true"></i></button>
                          <div class="dropdown-content">
                            <a href="#">Link 1</a>
                            <a href="#">Link 2</a>
                            <a href="#">Link 3</a>
                          </div>
                      
                      </div>
                </th>
              </tr>
          </table>
          <table id="headdie">
              <tr id="logo">
                  <th><span id="bigline1">Tranny Huntaz Crew<i class="fa fa-copyright " aria-hidden="true" style="font-size: .5em  ; vertical-align: middle ; margin-left: 4px ;"></i></span></th>
                  <th style="width: 15em ; "><h1>-Über Uns-</h1></th>
                  <th><span id="bigline1">Tranny Huntaz Crew<i class="fa fa-copyright " aria-hidden="true" style="font-size: .5em  ; vertical-align: middle ; margin-left: 4px ;"></i></span></th>
              </tr>
          </table>
          <p id="footr">est. 2016</p>
      </div>
  </body>

Hier mein css file:

h1 {
    text-align: center ; 
    font-family: Lobster ; 
    font-size: 3em ; 
    font-weight: 600 ;
}

html, body {
    background-color: #d2cdb2 ;
    margin: 0;
    padding: 0;
    height: 100%;
}

#navi th {
    font-family: "Open Sans Condensed" ;
    font-size: 1.3em ;
    font-weight: 300 ;
}

#navi  {
    color: aliceblue; 
    border-radius: 25px;
    border: 3px solid aqua;
    padding: 5px;
    background-color: black ; 
    width: 99%;
    table-layout: fixed ;
    margin: auto;
    
}

#navi th:hover {
    background-color: aliceblue;
    color: black ;
    border-radius: 25px ;
}

#bigline1 {
    font-family: "Creepster" ;
    font-size: 2.5em ;
    border: 10px solid red ;
    border-radius: 100% ;
    background-color: white ; 
    padding: .5em
}

#logo {
    text-align: center ;
}

#backr {
    width: 90% ;
    background-color: aliceblue ;
    margin: auto ;
    border: 2px solid aqua;
    border-radius: 10px;
    position: inherit ;
    min-height: 100%;
    position: relative ;
}

#footr {
    text-align: center ;
    font-family: "Bungee Shade" ;
    font-size: 1.5em ;
    background-color: #ffffcc ;
    padding-bottom:  0.5em ;
    padding-top: 0.5em ;
    bottom: 0 ;
    position: absolute;
    width: 100%;
    border-bottom-left-radius: 10px ;
    border-bottom-right-radius: 10px ;
    border-top: 2px solid black ;
    margin-bottom: 0 ;
}

#headdie {
    width: 99%;
    table-layout: fixed ;
    margin: auto ;
    margin-top: 3em ;
}



.dropbtn {
    background: none;
    color: inherit;
    padding: inherit ;
    font-family: inherit ;
    font-size: inherit ;
    border: none;
    cursor: pointer;
}

.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: middle;
    background-color: #f9f9f9;
    min-width: 8em;
    box-shadow: 0px 10px 20px  #595959;
    margin-bottom: 0.5em;
    margin-top: 0.25em;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
    display: block;
}

Hier mein JavaSkript:

function showmen() {
    if (document.getElementsByClassName('dropdown-content').style.display === 'none') {
        document.getElementsByClassName('dropdown-content').style.display = 'block';
    } 
    else {
        document.getElementsByClassName('dropdown-content').style.display = 'none';
    }
}

Ich möchte, dass sich der 'droptdown-content' nicht nur über hover in dem CSS file öffnet, sondern auch bei einem Klick öffnet (falls man einen Touchscreen verwendet) daher hab ich das Skript geschrieben. Villeicht ist der Fehler ja offensichtlich und ich seh ihn nicht, doch ich probier das jetzt schon seit zwei Tagen und hänge einfach fest... Das ist meine erste HTML seite, ich bringe mir das gerade selber bei... Danke im Vorraus und außerdem riesen Lob an die Selfhtml seite und an alle Leute die hier aktiv sind. Es gibt nur wenige Communities mit solchem wissen und solcher Hilfe! Danke!

P.S.: die ordner Struktur meines Html ist Folgende (wegen der eventuell verwirrenden bezüge auf css und js file): /html/ueber_uns.html ; /css/uns.css ; /js/menu.js ; /index.html /main.css

Das Simikolon trennt neue Pfade, irgendwie funtioniert der Zeilenumbruch nicht...

Beitrag melden

– Informationen zu den Bewertungsregeln

akzeptierte Antworten