Более одного класса css, доступных в javascript

Как я могу сделать так, что даже «toggle_cart» можно щелкнуть так же, как «clickerHeader» , но сохраняет эффект зависания (см. Стрелку)?Более одного класса css, доступных в javascript

см http://jsfiddle.net/realitylab/STE48/3

$('.eventMenu > ul').toggleClass('no-js js'); 
      $('.eventMenu .js ul').hide(); 
      $(document).on("click", function(e) { 
       var $elem = $(e.target); 
       if ($elem.hasClass('clickerHeader')) { 
        $('.eventMenu .js ul').not($elem.next('ul')).hide(); 
        $elem.next("ul").slideToggle(); 
       } else if (!$($elem).parents('.contentHolderHeader').length) { 
        //} else { 
        $('.eventMenu .js ul').hide(); 
       } 
      });

источник

2014-01-05 Lars Holmqvist

Здравствуйте, Посмотрел ваши изменения, но не понимаю. Я хочу, чтобы «toggle_cart» был доступен клиенту так же, как «clickerHeader»? –

Есть ли какая-либо причина, что все это в элементе li? – 2pha

Причина в том, что я добавлю больше ссылок (чтобы стать меню) –

Просто оберните оба элемента в DIV .. http://jsfiddle.net/STE48/5/

источник

2014-01-05 11:13:15 2pha

Да, но затем останавливает работу резервного копирования в вашем примере, если у вас нет активированного javascript, а затем переходит в меню до наведения курсора мыши. –

В CSS добавить:

.eventMenu:hover .no-js .contentHolderHeader { 
    display: block; 
}

Также добавьте display: none к div.eventMenu .contentHolderHeader ,

Заменить JS с:

$('.eventMenu > ul').toggleClass('no-js js'); 
$(".toggle_cart").click(function(e){ 
    $(".contentHolderHeader").slideToggle(); 
    e.stopPropagation(); 
}); 
$(".eventMenu").click(function(e){ 
    e.stopPropagation(); 
}); 
$(document).click(function(){ 
    $(".contentHolderHeader").slideUp(); 
});

Снимите внутреннюю ul в HTML.

Испытано с/без JS: http://jsfiddle.net/vuF9n/2/

источник

2014-01-05 11:40:21 vinod

hi, Неправильно, тогда mnu не работает без javascript (мышь) плюс он не поднимается, когда вы нажимаете на кнопку «contentHolderHeader». –

@LarsHolmqvist обновил ответ и JSFiddle. – vinod

Минимальное изменение существующего кода, чтобы добавить следующие две строки после первой строке функции мыши:

if ($elem.hasClass('toggle_cart')) 
    $elem = $elem.next();

Другими словами, если пробел со стрелкой нажимается, притворяется, что на самом деле был привязан элемент привязки. В контексте:

 $(document).on("click", function(e) { 
      var $elem = $(e.target); 
      if ($elem.hasClass('toggle_cart')) 
       $elem = $elem.next(); 
      if ($elem.hasClass('clickerHeader')) { 
      // etc.

Демо: http://jsfiddle.net/STE48/6/

источник

2014-01-05 12:41:42 nnnnnn

Более одного класса css, доступных в javascript

ответ

Смежные вопросы