Javascript Jquery切换元素

我有这个HTML

<div id="text-slide"><ul class="menu">
  <li><a href="" id="toggle1">Webdesign</a>
</li><div class="toggle1" style="display:none;width:45%; position:absolute;left: 16%; top:0;"><h2>Webdesign</h2><p>Test</p></div>
 <li>
 <a href="" id="toggle2">Design de identidades</a>
</li><div class="toggle2" style="display:none;width:45%;position:absolute;left: 16%; top:0;"><h2>Design de identidades</h2><p>Test</p></div></ul></div>

有人知道如何添加许多元素并简化jquery脚本吗？ 我试图用相同的jquery添加第三个元素，但对我不起作用。

像这样的东西

HTML

JS

---

您应该使用选择器not（）来完成此任务，它对我非常有用

$('.content').not($this).slideUp('slow');   

---

您应该发布您尝试过的内容，以及它不起作用的原因。为什么li和div元素是兄弟元素？？这使html invalidStyle成为您想要的元素，这只是切换可见性。可以用css使其成为这样吗？就是这样，我还有一个问题。以及如何在css中为当前元素添加一些样式？？例如，如a:current/a:active然后接受答案。：）嗨，Skatch，我用你的小提琴中的元素创建了一个索引，但是当我按下toggle元素时，什么都没有发生。我如何在css中为当前元素添加一些样式？？例如，像a:current/a:active。不一定。我使用了一个if语句，在单击活动元素时阻止一切。

<div class="toggle">toggle</div>
<div class="content">content</div>
<div class="toggle">toggle</div>
<div class="content">content</div>
<div class="toggle">toggle</div>
<div class="content">content</div>
<div class="toggle">toggle</div>
<div class="content">content</div>

.content {display:none;}

$('.toggle').click(function(){
    if($(this).next('.content').is(':hidden')) {
        $('.content').slideUp();
        $(this).next('.content').slideDown();
    }
});

$('.content').not($this).slideUp('slow');