Несколько выпадающих меню jquery на 1 странице - PullRequest
Новая
       32

Несколько выпадающих меню jquery на 1 странице

1 голос
/ 28 сентября 2010

Я новичок в jquery и пытаюсь составить выпадающий список, как на www.teefury.com (размеры для мужчин и женщин). Я подошел довольно близко, но когда я нажимаю одну из кнопок, все они открываются (или на моей второй попытке только первая). Итак мои вопросы:

  • Кто-нибудь знает учебник, который я могу использовать для этого?
  • Какой лучший способ попробовать создать его самостоятельно? (у меня есть HTML & CSS готовы)
  • Как мне сделать так, чтобы только 1 из раскрывающихся списков открывался при нажатии, а не все или только первый?

Вот что у меня есть: http://users.telenet.be/ezarto/dropdown/

PS: это также мой первый стекопоток, пожалуйста, сообщите мне обо всем, что я сделал не так:)

PSS: разрешена только 1 гиперссылка, извините, но вам придется скопировать / вставить тефери одну

Ответы [ 3 ]

1 голос
/ 28 сентября 2010

Используйте это и переместите DOM, чтобы попасть в соответствующий список, который вы пытаетесь показать.Я изменил ваш JavaScript для этого. 

$(function() {

 $(".dropdown dt a").click(function() {
   $(this).closest('dt').siblings('dd').find('ul').toggle();
 });

 $(".dropdown dd ul li a").click(function() {
   var text = $(this).text();

   $(this).closest('dd').siblings('dt').find('span').text(text);

   $(this).closest('ul').hide();
 });

});​
0 голосов
/ 28 сентября 2010

Ваши выпадающие меню получили один и тот же класс dl class="dropdown">

Так что, когда вы делаете это, например: 

$(".dropdown dt a").click(function() {
  $(".dropdown dd ul").toggle();
});

Он делает это на них обоих!Вы можете узнать, на какой из них вы нажимаете.Например, вы можете указать в выпадающем списке идентификатор 

<dl id="dropdown1">

и, соответственно, изменить свой jQuery.

0 голосов
/ 28 сентября 2010

демо

http://jsfiddle.net/QznH7/

CSS 

.invisible
{
    display:none;
}​

HTML 

<dl>
        <dt><a class='showMenu' href="javascript:"><span>1</span></a></dt>
        <dd>
            <ul class="invisible">
                <li><a href="#">a</a></li>
                <li><a href="#">b</a></li>
            </ul>
        </dd>
</dl>

<dl>
        <dt><a class='showMenu' href="javascript:"><span>2</span></a></dt>
        <dd>
            <ul class="invisible">
                <li><a href="#">a</a></li>
                <li><a href="#">b</a></li>
            </ul>
        </dd>
    </dl>

1018 *

Javascript 

jQuery(function(){
    jQuery('.showMenu').bind('click',function(e){
        jQuery(e.target).parents('dl:first').find('ul').toggleClass('invisible')
    });   
});

1025 *

...