jQuery 显示隐藏多个链接幻灯片切换 div答案

【问题标题】：jQuery show hide multiple links slide toggle divjQuery 显示隐藏多个链接幻灯片切换 div
【发布时间】：2013-08-23 23:44:17
【问题描述】：

我有一个关于切换效果的问题。我设法能够切换同一个 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>

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

    return false;
        });
});

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

    return false;
        });
});

【问题讨论】：

标签： javascript jquery

【解决方案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/

【讨论】：

【解决方案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/

【讨论】：

只是打开和关闭每个链接。我需要它来打开和关闭同一个 div。想象一个打开和关闭 1 Div 的导航。这就是我的目标。
它根据其所处的状态打开和关闭。所以说我单击切换 1 打开然后切换 2，它关闭了第一个切换但没有打开我想要切换 2 的内容.
@Keith -- 使用$(".toggle").slideUp();，然后使用slideDown()。

【解决方案3】：

你需要这样的东西吗？

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

Try it

【讨论】：

是的，除非您单击第一个开关并打开它，我希望能够在单击第二个开关时关闭该开关，因为它会打开新信息。