javascript - jQuery 显示隐藏多个链接幻灯片切换 div

Question

我有一个关于切换效果的问题。我设法能够切换同一个 div 这是我的目标，我的问题是我想添加一个效果，即如果（toggle1）打开并且我点击toggle2，它将关闭toggle 1并打开toggle 2。现在，如果您单击任何切换，它只会根据它所处的状态打开和关闭切换。我希望能够在单击不同切换时切换 div 中的任何内容。我希望这是有道理的。http://jsfiddle.net/nbh2w/

HTML

<div>
<a href="#" id="toggle3">Slide Toggle3</a><br /><br />
<a href="#" id="toggle4">Slide Toggle4</a><br /><br />
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:200px;"></div>
 </div>

JS

    $(function() {
    $('#toggle4').click(function () {
    $('.toggle').slideToggle('1000');

    return false;
        });
});

    $(function () {
    $('#toggle3').click(function () {
    $('.toggle').slideToggle('1000');

    return false;
        });
});

Answer 1

我不确定您要达到的目标，但根据我的理解，这可能就是您想要的。滑动切换3

滑动切换4

 </div>


    $(function() {
    $('#toggle4').click(function () {
        $('.toggle').hide('1000');
        $('.toggle').text('toggle 4 clicked');
    $('.toggle').slideToggle('1000');

    return false;
        });
});

    $(function () {
    $('#toggle3').click(function () {
        $('.toggle').hide('1000');
         $('.toggle').text('toggle 3 clicked');
    $('.toggle').slideToggle('1000');

    return false;
        });
    });

http://jsfiddle.net/rNqd5/

Answer 2

您可以使用 的实例this，此外，每个链接都需要两个 div：

<a href="#" id="toggle3">Slide Toggle3</a>
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:200px;"></div>

<br><br>

<a href="#" id="toggle4">Slide Toggle3</a>
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:200px;"></div>

您还应该为您的链接使用一个类，但我只是用逗号分隔 ID

$("#toggle3, #toggle4").click(function() {
    $(this).next(".toggle").slideToggle("slow");
});

演示：http: //jsfiddle.net/nbh2w/2/

Answer 3

你需要这样的东西吗？

  $('#toggle4').click(function () {
               $('.toggle').hide();
                $('.toggle').slideToggle('1000');
                 return false;
                });

试试看