Question

我有一个关于切换效果的问题。我已经设法能够切换相同的div，这是我的目标，我的问题是我想添加效果，如果（toggle1）打开并且我点击toggle2，它将关闭切换1并打开切换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;
                });

Try it

jQuery show hide隐藏多个链接幻灯片切换div

3 个答案: