Как добавить / удалить меню JQuery с подменю? - PullRequest
Новая
       20

Как добавить / удалить меню JQuery с подменю?

1 голос
/ 21 февраля 2009

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

<body>
<div id="menu">
  <a href="#"><li>users <br /></a></li>
  <a href="#"><li>product <br /></a></li>
  <a href="#"><li>movies <br /></a></li>
  <a href="#"><li>clips <br /></a></li>
  <a href="#"><li>teaser <br /></a></li>
  <a href="#"><li>trailer <br /></a></li>
  <a href="#"><li>HDMovie <br /></a></li>
</div>
</body>

мой jquery .. 

$(document).ready(function(){
$(".users").bind("click", function(){
   $('#menu').fadeOut();
   $('#sub_menu').fadeIn();
})

Это только для ссылки пользователей, чтобы показать свой подсписок. Если я хочу сделать то же самое со ссылками на товары, фильмы и клипы, мне нужно скопировать и вставить функцию? Может ли кто-нибудь здесь привести пример функции, чтобы мне не нужно было копировать вставить?

Спасибо;)

Ответы [ 3 ]

1 голос
/ 21 февраля 2009

Честно говоря, я бы использовал плагин Superfish , а не изобретал велосипед. Объедините его с hoverIntent , и он сможет делать все, что вам нужно.

0 голосов
/ 24 февраля 2009

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

Вот ссылка, что я делаю http://umarstudio.com/test/html/screen_2b.htm

Мне просто нужно подменю, чтобы исчезнуть для каждой ссылки .. Спасибо;)

0 голосов
/ 21 февраля 2009

Попробуйте что-нибудь подобное. Кроме того, убедитесь, что вы правильно завершили вложенные теги 

<body>
<ul id="products" class="menu">
<li><a href="#">users</a>
    <ul class="sub_menu'>
        <li><a href="#">user 1</a></li>
        <li><a href="#">user 1</a></li>
        <li><a href="#">user 1</a></li>
    </ul>
</li>
<li><a href="#">product</a>
    <ul class="sub_menu'>
        <li><a href="#">product 1</a></li>
        <li><a href="#">product 1</a></li>
        <li><a href="#">product 1</a></li>
    </ul>
</li>
<li><a href="#">movies</a></li>
<li><a href="#">clips</a></li>
<li><a href="#">teaser</a></li>
<li><a href="#">trailer</a></li>
<li><a href="#">HDMovie</a></li>
</ul>

</body>

скрипт 

$(document).ready(function(){
    $(".menu > li > a").bind("click", function(){
        $('.sub_menu').fadeOut();
        $(this).parent().find('.sub_menu').fadeIn();
    }
})
...