Question

我已经学习HTML和CSS几周了，我开始对这些感觉很舒服。但是我也在努力学习JavaScript。

我一直在处理HTML和CSS中的按钮，您可以查看按钮的演示here.

我想在单击按钮时显示下拉菜单，如果再次单击该按钮，则下拉菜单会消失。

是否有任何简单或可理解的方法来创建在JavaScript中执行此操作的函数？

这是我的代码：

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;

     }

Answer 1

它可以是onclik事件的基本切换显示功能：

    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>

在此测试：http://codepen.io/anon/pen/cHIrd/

注意：

opacity:0;已从您的初始CSS
中删除
更好的做法是切换类而不是样式值:)

也许可以通过javScript设置onclick事件。
可以添加
return false以避免链接到href。

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

Answer 2

Html

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

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是一个示例

使用下拉菜单为按钮创建onclick事件

2 个答案: