为带有下拉菜单的按钮创建onclick事件

Creating an onclick event for a button with a dropdown menu

本文关键字：创建 onclick 事件 按钮 下拉菜单      更新时间：2023-09-26

我已经学习HTML和CSS几个星期了，现在我开始对这些感觉很舒服。然而，我也在努力学习JavaScript。

我一直在用HTML和CSS制作一个按钮，你可以在这里查看按钮的演示。

我想使下拉菜单可见，当你点击按钮，如果你再次点击按钮，下拉菜单消失。

是否有任何简单或可理解的方法来创建一个函数，在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;
     }

它可以作为onclick事件的基本切换显示函数:

    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/

注意:

opacity:0;从初始CSS中移除

更好的做法是切换类而不是样式值:)

或者通过javScript设置onclick事件。

可以添加

返回false以避免链接到href。

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

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");
        }
    };

示例

相关文章：