jQuery切换元素

Question

我有这个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，用于分隔两个元素

 $(function() {
        $('#toggle1').click(function() {
        $(".toggle1").toggle("slow");
        $(".toggle2").hide("slow");
        $(this).addClass('current');

        $("#toggle2").removeClass('current');

        return false;
     });
      $('#toggle2').click(function() {
        $(".toggle2").toggle("slow");
        $(".toggle1").hide("slow");
        $(this).addClass('current');

        $("#toggle1").removeClass('current');

        return false;
     });                               
});

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

Answer 1

像这样吗

的HTML

<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>

的CSS

.content {display:none;}

JS

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

更新的小提琴

Answer 2

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

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

此处更新的内容