Question

我在我的网站上设置了3个向下滑动面板功能，我的问题是你可以同时点击并展开所有3个并且它们重叠并且看起来很乱，有没有办法我可以一次打开一个这样的当其他人打开时，其他人会自动关闭。

的jQuery

$(document).ready(function () {

$(".topLink01").click(function () {
 $("#panel1").slideToggle("slow");
 $(this).toggleClass("active"); 
 return false;
});


 $(".topLink02").click(function () {
 $("#panel2").slideToggle("slow");
 $(this).toggleClass("active"); 
 return false;
});


 $(".topLink03").click(function () {
 $("#panel3").slideToggle("slow");
 $(this).toggleClass("active"); 
 return false;
});

});

HTML

<a href="#" class="topLink topLink01">BUTTON<</a>

<a href="#" class="topLink topLink02">BUTTON</a>

<a href="#" class="topLink topLink03">BUTTON</a>

<div id="panel1">
CONTENT
</div>

<div id="panel2">
CONTENT
</div>

<div id="panel3">
CONTENT>
</div>

CSS

#panel1{ position:absolute; background: #0e5faf; display: none; right:0; top:36px; width: 250px; z-index:999; line-height: 18px; padding:15px; }

#panel2{ position:absolute; background: #0e5faf; display: none; right:0; top:36px; width: 250px; z-index:999; line-height: 18px; padding:15px; }

#panel3{ position:absolute; background: #0e5faf; display: none; right:0; top:36px; width: 250px; z-index:999; line-height: 18px; padding:15px; }

由于

Answer 1

我知道你已经接受了答案但是你的方法效率不高。我会把它留在这里，也许它会帮助你。

CSS：

    .toggles{display:none}

HTML：

    <a href="" class="topLink" data-target="t1">BUTTON</a>
    <a href="" class="topLink" data-target='t2'>BUTTON</a>
    <a href="" class="topLink" data-target='t3'>BUTTON</a>
    <div class="toggles" data-target='t1'>CONTENT1</div>
    <div class="toggles" data-target='t2'>CONTENT2</div>
    <div class="toggles" data-target='t3'>CONTENT3</div>

JS：

    $(document).ready(function () {
        $(".topLink").on('click', function (event){
            event.preventDefault();
            var e = $(this); //writing $(this) every time is bad
                t = $("div[data-target='"+e.attr('data-target')+"']"); //same as above

            if(e.hasClass('active')){ 
                //remove from this
                e.removeClass("active");
                //close box    
                t.slideUp("slow");
            } else { //toggle menu when clicking on some other link
                //remove from everywhere
                $(".topLink").removeClass('active');
                //slide every box up
                $('.toggles').slideUp("slow");
                //add to this only
                e.addClass('active'); 
                //slide associated box down
                t.slideDown("slow");
            }
        });     
    });

这是一个fiddle，以防你查看它。当然，这段代码也可以改进。

Answer 2

这对我有用：

<script>
$(document).ready(function () {
var opened = $(".panel");
$(".topLink01").click(function () {
opened.slideToggle("slow");
$(".active").toggleClass("active");
 $("#panel1").slideToggle("slow");
opened = $("#panel1");
 $(this).toggleClass("active"); 
 return false;
});


 $(".topLink02").click(function () {
opened.slideToggle("slow");
$(".active").toggleClass("active");
 $("#panel2").slideToggle("slow");
opened = $("#panel2");
 $(this).toggleClass("active"); 
 return false;
});


 $(".topLink03").click(function () {
opened.slideToggle("slow");
$(".active").toggleClass("active");
 $("#panel3").slideToggle("slow");
opened = $("#panel3");
 $(this).toggleClass("active"); 
 return false;
});

});
</script>
<a href="#" class="topLink topLink01">BUTTON<</a>

<a href="#" class="topLink topLink02">BUTTON</a>

<a href="#" class="topLink topLink03">BUTTON</a>

<div id="panel1" class="panel">
CONTENT
</div>

<div id="panel2" class="panel">
CONTENT
</div>

<div id="panel3" class="panel">
CONTENT>
</div>

jQuery向下滑动面板打开/关闭

2 个答案: