Erstellen eine onclick-Ereignis für eine Schaltfläche mit einer dropdown-Menü

Ich habe gelernt, HTML und CSS für ein paar Wochen jetzt, und ich fange wohl fühlen mit diesen. Aber ich versuche zu lernen, JavaScript auch.

Habe ich gearbeitet, auf einen Knopf in HTML und CSS, können Sie die demo-Taste hier.

Möchte ich, um das dropdown-Menü sichtbar, wenn Sie auf die Schaltfläche klicken und auch, wenn Sie die Schaltfläche erneut klicken, das dropdown-Menü verschwindet.

Gibt es eine einfache oder verständliche Art und Weise für die Erstellung einer Funktion, die in JavaScript?

Hier ist der code den ich habe:

HTML:

    <div id="language-wrapper">
      <a class="language-icon fr" href="#" alt="choose-your-language">Language</a>
      <div id="language-dropdown">
        <h3>Choose your language</h3>
        <a class="language-links" href="#">Chinese</a>
        <a class="language-links" href="#">Danish</a>
        <a class="language-links" href="#">Deutsch</a>
        <a class="language-links" href="#">English</a>
        <a class="language-links" href="#">Espanol</a>
        <a class="language-links" href="#">Filipino</a>
        <a class="language-links" href="#">Hindu</a>
        <a class="language-links" href="#">Italiano</a>
        <a class="language-links" href="#">Norsk</a>
        <a class="language-links" href="#">Nederlands</a>
        <a class="language-links" href="#">Polski</a>
        <a class="language-links" href="#">Portugues</a>
        <a class="language-links" href="#">Svenska</a>
        <a class="language-links" href="#">Suomi</a>
        <a class="language-links" href="#">Turkce</a>
        <a class="language-links" href="#">Urdu</a>
        <p>Do you speak multiple languages or can't find your language? <font color="#d13030">Help us translate!</font><p>

      </div> <!-- end of language-dropdown class -->
    </div> <!-- end of language-wrapper -->

CSS:

    #language-wrapper { display: inline-block; }

    #language-wrapper:hover #language-dropdown { opacity: 1; display: block; }

    .language-icon {
      color: #fff;
      font-weight:700;
      padding-right:20px;
      padding-left:30px;
      display:inline-block;
      font-size:11px;
      text-align:right;
      text-decoration:none;
      position:relative;
      left: 0; top: 0;
    }

    .fr { background: url("images/language-sprite.png") no-repeat 0 0; }
    .fr:hover { background: url("images/language-sprite.png") no-repeat 0 -20px; color: #d13030; }

     .language-icon:before {
      content:'\25BE';
      width:0px;
      height:0;
      position:absolute;
      right:16px;
      top: 0;
    }

    .language-icon:hover:before { 
      color: #d13030;
      content: '\25B4';
      top: -1px;
    }

    /* ------------------ LANGUAGE DROPDOWN ------------------ */

     #language-dropdown {
      opacity: 0;
      width: 1023px;
      display: none;
      margin-top: 3px;
      left: 0;
      position: absolute;
      border: 1px solid #ddd;
      background: #fff;
      box-shadow: 0px 3px 3px #b3b3b3;

     }

     #language-dropdown h3 {
      color: #d13030;
      font-size: 14px;
      font-weight: normal;
      padding: 5px 15px 0px 15px;
     }
    #language-dropdown p {

      font-size: 12px;
      padding: 0px 0px 10px 15px;
    }

    #language-dropdown a {
      padding: 0px 0px 0px 15px;
    }


     .language-links {
      font-size: 12px;
      text-decoration: none;
      color: #2793e6;
     }

     .language-links:hover {
      text-decoration: underline;

     }
  • Vanille -, javascript-oder jquery?
  • Vanille javascript würde ich sagen.
InformationsquelleAutor Nohman | 2014-03-22
Schreibe einen Kommentar