在jquery中简化点击和切换功能

Question

好吧，我需要一些帮助，因为我是普通的卡住。我正在尝试制作一个简单的下拉式菜单，它将用于不同的目的，然后是导航菜单。但无论如何，我可以完美地工作，我只需要一些简单的代码帮助。下面是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种不同和申报单显示，我不希望所有的代码。所以，我试图把它的代码干净简单的一小段：

//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(); 
}); 

，这里是哪里卡住了，这是应该是上面的一个较短的版本，但是当我点击第一个它打开DIV，当我在第二点击它隐藏第一个div但当时如果我在第一次单击再次它没有隐藏的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/

Answer 1

不能有多个元素具有相同的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(); 
});