且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

.slideToggle()放在一个DIV上,而不是所有其他同一个类

更新时间:2023-09-11 17:30:58

您可以将某项相对于被点击的项作为目标:

You can target an item relative to the one that was clicked on like this:

$(document).ready(function(){
    $('.toggle').click(function(){
        $(this).prev('.selection').slideToggle("slow");
    });
});

这将在.toggle项上单击并获得上一个.selection项,然后只滑动一次.

This will get the clicked on .toggle item and get the previous .selection item and slideToggle just that one.

您可以在这里看到它的工作: http://jsfiddle.net/jfriend00/2zJ8z/

You can see it work here: http://jsfiddle.net/jfriend00/2zJ8z/

我建议您对其进行改进,以便您可以单击.selection项目使其消失,因为这使切换鼠标变得更容易一些:

I would suggest improving it so you can click on the .selection item to make it go away as this makes toggling to explore with the mouse a little easier:

$(document).ready(function(){
    $('.toggle').click(function(){
        $(this).prev('.selection').slideToggle("slow");
    });

    $('.selection').click(function(){
        $(this).slideToggle("slow");
    });
});​

您可以在此处看到此较小的增强功能: http://jsfiddle.net/jfriend00/JrhNz/

You can see this minor enhancement here: http://jsfiddle.net/jfriend00/JrhNz/

如果您要在打开一个新打开的窗口时关闭其他打开的窗口,则可以使用以下方法:

If you want any other open ones to close when you open a new one, you could use this:

$(document).ready(function(){
    $('.toggle').click(function(){
        var prev = $(this).prev('.selection');
        $(this).siblings('.selection').not(prev).slideUp("slow");
        prev.slideToggle("slow");
    });

    $('.selection').click(function(){
        $(this).siblings('.selection').slideUp("slow");
        $(this).slideToggle("slow");
    });
});​

此处的此选项的演示: http://jsfiddle.net/jfriend00/JrhNz/6/

Demo of this option here: http://jsfiddle.net/jfriend00/JrhNz/6/