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

好吧，我需要一些帮助，因为我被卡住了。我试图使一个简单的下拉式菜单，将用于不同的目的，然后导航菜单。但无论如何，我可以让它完美地工作，我只是需要一些帮助简化代码。以下是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>

这就是我被卡住的地方，这应该是上面的一个较短版本，但当我点击第一个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();
});

我知道应该有一个非常简单的解决方案，但我就是看不到。提前感谢所有人，如果这更有帮助的话，这是我的JSFIDLE！

---

不能有多个元素具有相同的

id

当需要共享类时，应该使用它们。这里有一个例子说明了如何改变它

---

不要吹毛求疵，但可以使用var tid=this.id将其缩短一点；而不是使用.attr（'id'）。。。每个字节都计数；）是的，那样稍微好一点，但不是因为它坏了，所以我没有改变。非常感谢你，詹姆斯。。我知道这是一件非常简单的事情，我只是没有看到！这工作做得很好！

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

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

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

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

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