Создание события onclick для кнопки с выпадающим меню

Question

Создание события onclick для кнопки с выпадающим меню

0

Я изучаю 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;

     }

Nohman 22 март 2014, в 23:08

Источник

0

ванильный JavaScript или JQuery?
jycr753 22 март 2014, в 21:16
0

ванильный JavaScript, я бы сказал.
Nohman 22 март 2014, в 21:18

Теги:

javascript

html

css

onclick

drop-down-menu

2 ответа

0

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

    };

Вот пример

jycr753 22 март 2014, в 18:35

Ещё вопросы

G-Cyr · Accepted Answer · 2014-03-22T19-51-00.000Z

это может быть базовая функция отображения в 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

Лучшая практика заключается в том, чтобы переключать класс, а не значения стиля :)

и, возможно, установить событие onclick через javScript.

return false может быть добавлено, чтобы избежать ссылки на href.

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