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

Updated fiddle

Answer 2

你应该使用选择器 not() 来完成这个任务，它对我来说非常有用。

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

UPDATED FIDDLE HERE

Jquery 切换元素

Jquery toggle elements

html

javascript

jquery

elements