Как получить выпадающее меню, чтобы открыть / закрыть по щелчку, а не наведите курсор?

Я очень новичок в javascript и ajax/jquery и работал над попыткой получить скрипт, чтобы открыть и закрыть выпадающее меню при нажатии, а не при наведении.

меню в http://www.gamefriction.com/Coded/ и это темное меню справа под заголовком. Я хотел бы, чтобы он открывался и закрывался, как и другое меню, которое находится ниже него (оно светло-серое и находится в модуле "Select Division").

серое меню является частью меню и меню языка нет.

у меня есть импорт jquery, который можно найти в источнике представления приведенной выше ссылки.

Мой Код Javascript:

<script type="text/javascript">

 /* Language Selector */

 $(function() {
     $("#lang-selector li").hover(function() {
         $('ul:first',this).css('display', 'block');
     }, function() {
         $('ul:first',this).css('display', 'none');
     });
 });

 $(document).ready(function(){ 

  /* Navigation */
  $('.subnav-game').hide();
  $('.subnav-game:eq(0)').show();
  $('.preorder-type').hide();


  $('.preorder-type:eq(3)').show();


 });


 </script>

мой CSS: 

#lang-selector 
  {
  font-size: 11px;
  height: 21px;
  margin: 7px auto 17px auto;
  width: 186px;
  }

 #lang-selector span 
  {
  color: #999;
  float: left;
  margin: 4px 0 0 87px;
  padding-right: 4px;
  text-align: right;
  }

 #lang-selector ul 
  {
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  }

 #lang-selector ul li a 
  {
  padding: 3px 10px 1px 10px;
  }

 #lang-selector ul, #lang-selector a 
  {
  width: 186px;
  }

 #lang-selector ul ul 
  {
  display: none;
  position: absolute;
  }

 #lang-selector ul ul li
  {
  border-top: 1px solid #666;
  float: left;
  position: relative;
  }

 #lang-selector a 
  {
  background: url("http://www.gamefriction.com/Coded/images/language_bg.png") no-repeat;
  color: #666;
  display: block;
  font-size: 10px;
  height: 17px;
  padding: 4px 10px 0 10px;
  text-align: left;
  text-decoration: none;
  width: 166px;
  }

 #lang-selector ul ul li a 
  {
  background: #333;
  color: #999;
  }

 #lang-selector ul ul li a:hover 
  {
  background: #c4262c;
  color: #fff;
  }

мой HTML:

<div id="lang-selector">
      <ul>
       <li>
        <a href="#">Choose a Language</a>
        <ul>
         <li><a href="?iw_lang=en">English</a></li>
         <li><a href="?iw_lang=de">Deutsch</a></li>
         <li><a href="?iw_lang=es">Espa&ntilde;ol</a></li>
         <li><a href="?iw_lang=fr">Fran&ccedil;ais</a></li>
         <li><a href="?iw_lang=it">Italiano</a></li>
        </ul>
       </li>
      </ul> 
     </div>

спасибо!

8
css drop-down-menu javascript jquery

5 ответов

 $(function() {
     $("#lang-selector li:first").click(function(){
         $('ul:first',this).toggle();
     })
 });

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

9

Я бы сделал что-то подобное...

$(function() {
 $("#lang-selector > li").click(function() {
     $('ul:first',this).toggleClass('active');
 });
});

и, затем, в CSS добавьте это:

.active { display: block; }

>

также убедитесь, что sub-nav

    имеет "display: none;" на нем по умолчанию в вашем CSS.

    это сделает так, что нажатие тега

  • в #Lang-селекторе, но не в каких-либо тегах sub-nav
      откроет или закроет поднавига, в зависимости от это текущее состояние.

      если вы беспокоитесь о доступности наличия "display: none" на суб-nav по умолчанию, вы можете сделать что-то вроде этого...

     $(function() {
  $("#lang-selector li ul").addClass("hidden");
  $("#lang-selector li").click(function(e) {
      e.preventDefault();
      $('ul:first',$(this)).toggleClass('hidden active');
    });
 });

    >

    а затем добавьте это в CSS

    .hidden { display: none; }

    в этом сценарии по умолчанию отображается

      , затем при загрузке документа jQuery добавляет "скрытый" класс в все они, чтобы скрыть их, а затем по щелчку
    • он будет переключать скрытые и активные классы, отображая их или скрывая их.

      вам также нужно удалить текущий "display: none" из вашего #Lang-selector ul ul в CSS, иначе он имеет приоритет над скрытыми / активными классами.

3

поиск $("#lang-selector li").hover и заменить на 

$("#lang-selector li").click
3

.парить. ,щелчок. ,что-то, все триггеры, просмотрите эту ссылку:

События Jquery

чтобы узнать больше о событиях в jQuery!

Ps: сушил бхарвани (проголосовать), правильно, просто измените свой .Ховер по .нажмите

1

Если вам нужны две функции для события click, попробуйте .тумблер

Я использую этот:

$('.triggerlist').toggle(function(e) {
        e.preventDefault();
  $(this).find('ul').fadeIn();
    },function() {
  $(this).find('ul').fadeOut();
    });

что позволяет мне делать больше вещей на 2 функции, чем просто .нажмите кнопку с функцией 1.

1