Упрощение функции щелчка и переключения в jquery - PullRequest
Новая
       33

Упрощение функции щелчка и переключения в jquery

0 голосов
/ 28 января 2012

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

<div class="big">
    <a href="#" id="atog1">Hello</a>
    <a href="#" id="atog2">Hello</a>
    <a href="#" >Hello</a>
    <a href="#">Hello</a>
<br clear="all">
    <div id="drop" class="atog1">This is a toggled div1!</div>
    <div id="drop" class="atog2">This is a toggled div2!</div>
</div>

Вот исходный код Jquery, который прекрасно работает, но мне нужно иметь до 20 различных дивов a и div, чтобы показать, и я не хочу весь этот код.Поэтому я пытаюсь поместить его в чистый простой короткий фрагмент кода: 

//Make the toggled div
$('#atog1').show();
$('div.atog1').hide();
$('#atog1').click(function(){
    $('div.atog2').hide();
    $('div.atog1').slideToggle();
});
//Make the toggled div2
$('div.atog2').hide();
$('#atog2').click(function(){
    $('div.atog1').hide();
    $('div.atog2').slideToggle();   
});

И вот где я застрял, это то, что должно быть более короткой версией выше, но когда янажмите на первый a, он открывает div, и когда я нажимаю на второй a, он скрывает первый div, но затем, если я нажимаю первый a, он не скрывает div: 

$('div[class^=atog]').hide();

$('a').click(function(){
    var tid = $(this).attr('id');
    $('div#drop[class!='+tid+']').hide();
    $('div#drop[class='+tid+']').slideToggle();
});

Я знаю, что должнодействительно простое решение, но я просто не вижу его.Спасибо всем заранее и вот мой jsfiddle, если это более полезно!http://jsfiddle.net/liveandream/stGF9/

1 Ответ

1 голос
/ 28 января 2012

Вы не можете иметь несколько элементов с одинаковым id.

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

http://jsfiddle.net/stGF9/54/

$('div.drop').hide();

$('a').click(function(){
    var tid = $(this).attr('id');
    var el = $('div.drop.'+tid);

    $('div.drop').not(el).hide();
    el.slideToggle();
});
...