Как создать функцию jquery, которая будет переопределять мой указатель CSS, когда включен JavaScript? - PullRequest
Новая
       13

Как создать функцию jquery, которая будет переопределять мой указатель CSS, когда включен JavaScript?

0 голосов
/ 26 марта 2012

Я построил выпадающее меню на чистом CSS, и оно отлично работает. Прямо сейчас это работает только когда завис. При наведении курсора на #headerNav меню в моем .dropdownMenu открывается, и как только курсор убирается из dropdownMenu или #headerNav, меню исчезает.

Поскольку я хочу, чтобы пользователи с включенной js работали лучше, я решил использовать jquery, чтобы получить тот же эффект, что и , нажмите здесь . Который в основном держит раскрывающееся меню открытым после щелчка и щелчка только, не зависая.

По умолчанию я установил .dropdownMenu в «display: none», а затем, чтобы показать выпадающее меню, у меня есть что-то вроде этого: 

#headerNav:hover .dropdownMenu {

        display:block;


        //more code


}

Вот мой HTML: 

<header>
  <div id='headerContent'>
    <div id='LogoHolder'>
    </div>
    <nav id='headerNav'>
      <ul>
        <li id='photoThumbnail'></li>
        <li id='currentUser'>
          <ul class="dropdownMenu">
            <li>link1</li>
            <li>link2</li>
            <li>link3</li>
            <li>link4</li>
            <li>link5</li>
            <li>link6</li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</header>

Я экспериментирую уже 2 дня и не могу придумать, как это сделать. Я был бы признателен за помощь с наглядными примерами. Спасибо

С уважением

Ответы [ 5 ]

2 голосов
/ 26 марта 2012

Вместо того, чтобы нацеливать вашу навигацию по ее идентификатору, добавьте к ней класс, скажем hover-nav и обновите свой CSS соответственно:

.hover-nav:hover .dropdownMenu

Затем в своем javascript удалите cssкласс из ul

$(#headerNav').removeClass('hover-nav');

и используйте свой щелчок, чтобы показать плагин, как обычно.

1 голос
/ 26 марта 2012

Я думаю, что самый элегантный способ справиться с включенным / отключенным JavaScript - это добавить: 

<html class='no-js'>

затем удаление класса с помощью Javascript.

Итак, в вашем случае вы бы использовали 

.no-js #headerNav:hover .dropdownMenu {
        display:block;
}

для таргетинга только на пользователей с отключенным JavaScript.

Подробнее см. http://paulirish.com/2009/avoiding-the-fouc-v3/.

1 голос
/ 26 марта 2012

Натан ударил его по голове. Я добавлю код, поскольку я уже почти закончил с ним.

CSS 

#headerNav .hideable{ display:none; }
#headerNav:hover .hideable{ display:block; }​

HTML (просто добавьте hideable к вашему UL) 

<ul class="dropDownMenu hideable">

JQuery 

$('.hideable').hide().removeClass('hideable');

$('#headerNav').click( function(){
    $(this).find('.dropDownMenu').slideToggle();
});​​​​​​​​​​​​​​​​​​​​​​

Замените выше этот jQuery, чтобы добавить возможность закрывать меню, если где-либо еще нажата . 

$('.hideable').hide().removeClass('hideable');

$('#headerNav').click( function(e){
    $(this).find('.dropDownMenu').slideToggle();
    e.stopPropagation();
});​​​​​​​​​​​​​​​​​​​​​​

$('html').click( function(e){
    $('.dropDownMenu').slideUp();
});
0 голосов
/ 26 марта 2012

Попробуйте что-то вроде этого: 

$(document).ready(function(){
  $('#headerNav .dropDownMenu').hover(function() {
    $(this).show();
  });

  $('*:not(#headerNav .dropDownMenu)').click(function() {
    event.stopPropagation();
    $("#headerNav .dropDownMenu").hide();
  });
});
0 голосов
/ 26 марта 2012

Ваш CSS .dropdownMenu Ваш HTML class="drop DownMenu"

CSS чувствителен к регистру.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...