admin管理员组

文章数量:1323729

I've been learning HTML and CSS for some weeks now and I start feeling fortable with those. However I'm trying to learn JavaScript too.

I've been working on a button in HTML and CSS, you can view the demo of the button here.

I want to make the dropdown menu visible when you click the button and also if you click the button again the dropdown menu disappears.

Is there any simple or understandable way for creating a function which does this in JavaScript?

Here is the code I have:

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;

     }

I've been learning HTML and CSS for some weeks now and I start feeling fortable with those. However I'm trying to learn JavaScript too.

I've been working on a button in HTML and CSS, you can view the demo of the button here.

I want to make the dropdown menu visible when you click the button and also if you click the button again the dropdown menu disappears.

Is there any simple or understandable way for creating a function which does this in JavaScript?

Here is the code I have:

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;

     }
Share Improve this question edited Mar 22, 2014 at 22:04 fzzle 1,4945 gold badges24 silver badges29 bronze badges asked Mar 22, 2014 at 21:14 NohmanNohman 1211 gold badge3 silver badges17 bronze badges 2
  • vanilla javascript or jquery? – Jorge Y. C. Rodriguez Commented Mar 22, 2014 at 21:16
  • vanilla javascript i would say. – Nohman Commented Mar 22, 2014 at 21:18
Add a ment  | 

2 Answers 2

Reset to default 2

it can be a basic toggle display function on onclik event:

    function toggle(el) {
    var tag=document.getElementById(el);
      tag.style.display = tag.style.display === 'block' ? 'none' : 'block';
// set as defaut oposite defaut active value in document 
// here defaut is set to block cause it is none in CSS
    }
 <a class="language-icon fr" href="#" alt="choose-your-language" onclick="toggle('language-dropdown');">Language</a>

test here : http://codepen.io/anon/pen/cHIrd/

note:

opacity:0; removed from your initial CSS

Better practice is to toggle class not style values :)

and maybe to set onclick event via javScript.

return false can be added to avoid link to href .

 <a class="language-icon fr" href="#" alt="choose-your-language" onclick="toggle('language-dropdown');return false;">Language</a>

The Html

<button id="clickme">Clickme</button>
<h1 id="Another">Menu</h1>

The JavaScript:

    document.getElementById("clickme").onclick=function(){

        var el = document.getElementById('Another');
        if (el.style.display == '') {
          el.style.display = 'none';
              alert("hide");
        }else{
          el.style.display = '';
              alert("show");
        }

    };

Here is a sample

本文标签: javascriptCreating an onclick event for a button with a dropdown menuStack Overflow