CSS / Jquery, чтобы показать скрыть подменю

Question

все еще пытаюсь выяснить jQuery, и мне нужна помощь со списком боковой панели.

Я редактирую это после того, как попробую кое-что.

Я пытаюсь скрыть подменю до тех пор, пока не наведется определенный элемент списка, затем на боковой панели появится другое меню, и вы сможете навести указатель мыши на эти элементы. Я на полпути, но когда вы наведите курсор мыши, он исчезнет, ​​прежде чем вы сможете навести курсор мыши на любой из предметов. Я добавлю hoverIntent, но я не думаю, что это является проблемой, так как мне нужен весь этот скрытый блок, чтобы он также был триггером для отображения этого элемента. Я попробовал решение Steerpikes ниже, но оно привело к тому, что весь основной список исчез после мыши.

Вот структура сейчас:

<ul>
<li>Always Showing Element</li>
<li class="trigger">Title that triggers Submenu
<ul>
<li>
Hidden Menu
</li>
</ul>
</li>
</ul>

и сценарий

$('li.trigger ul').hide();
 $('li.trigger').hover(function() {
$('li.trigger ul').show();
},
function() {
      $('li.trigger ul').hide();
});

Так как я могу показать, когда моя мышь находится над li.trigger ul li elementes?

Спасибо за помощь в этом!

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

Answer 1

Следующее должно работать. Я только что написал нечто подобное 3 минуты назад:)

<ul id='menu'>
<li><a href="">Always showing</a></li>
<li><a href="">Always showing Title of Submenu</a>
<ul>
<li><a href="">Hidden until hover over Title </a></li>
</ul>
</li>

$('#menu li').hover(function() {
        $(this).find('ul').show();
    },
    function() {
      $(this).find('ul').hide();
});

Помните, что hover() принимает два аргумента - что происходит при наведении мыши и что происходит при наведении мыши.

Answer 2

Я хотел бы рассмотреть возможность использования CSS для этой функции. Поскольку это для меню, вы хотите, чтобы оно было очень доступным. Пользователи, у которых отключен JavaScript (например, мобильные браузеры) или кто-либо, использующий программу чтения с экрана, не смогут использовать ваше меню.

Попробуйте просмотреть: http://www.htmldog.com/articles/suckerfish/dropdowns/

Это CSS-решение для нескольких выпадающих меню, которое должно работать отлично.

Answer 3

Для тех, кто использует класс вместо идентификатора, вот код, который у меня работает:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div id='menu_box'>
<ul class='menu'>
<li><a href="">Always showing</a></li>
<li><a href="">Always showing Title of Submenu</a>
<ul>
<li><a href="">Hidden until hover over Title </a></li>
</ul>
</li>
</ul>
</div>
<script>
$('#menu_box ul li ul').hide(); 
$('#menu_box ul li').hover(function() {
        $(this).find('ul').show();
    },
    function() {
      $(this).find('ul').hide();
});
</script>

Answer 4

Может оказаться полезным сделать корневой элемент элементом уровня блока и выполнить обработку событий в этом контексте.