Jquery 独立显示/隐藏多个元素

我使用的是Andy Langton的show/hide jQuery代码，但在同一页面上使用多个切换时，代码似乎有一些小问题

当使用多个显示/隐藏时，它不会切换到正确的单词。它似乎整体跟踪最后一次切换，而不是每个链接的设置。换句话说，如果我在第一篇文章中单击“更多”，它将变为“更少”。如果我在下一篇文章中按“More”而不隐藏上一篇文章，它将停留在“More”，如果我现在尝试隐藏第一篇文章，这个词仍然是“Less”

这是我正在使用的代码：

// Andy Langton's show/hide/mini-accordion - updated 23/11/2009
// Latest version @ http://andylangton.co.uk/jquery-show-hide
$(document).ready(function() {

    // choose text for the show/hide link - can contain HTML (e.g. an image)
    var showText='MORE ↓';
    var hideText='LESS ↑';

    // initialise the visibility check
    var is_visible = false;

    // append show/hide links to the element directly preceding the element with a class of "toggle"
    $('.toggle').prev('.moree').append('<a href="#" class="toggleLink">'+showText+'</a>');

    // hide all of the elements with a class of 'toggle'
    $('.toggle').hide();

    // capture clicks on the toggle links
    $('a.toggleLink').click(function() {

    // switch visibility
    is_visible = !is_visible;

    // change the link depending on whether the element is shown or hidden
    $(this).html( (!is_visible) ? showText : hideText);
    //$(this).html( ($(this).html() == hideText) ? showText : hideText);

    // toggle the display - uncomment the next line for a basic "accordion" style
    //$('.toggle').hide();$('a.toggleLink').html(showText);
    $(this).parent().next('.toggle').toggle('slow');

    // return false so any link destination is not followed
    return false;

    });
    });

//Andy Langton的show/hide/mini手风琴-更新日期：2009年11月23日
//最新版本@http://andylangton.co.uk/jquery-show-hide
$（文档）.ready（函数（）{
//为显示/隐藏链接选择文本-可以包含HTML（例如图像）
var showText='MORE&darr；'；
var hideText='LESS&uarr；'；
//初始化可见性检查
var为可见=假；
//使用“toggle”类将显示/隐藏链接附加到元素前面的元素
$（'.toggle'）.prev（'.moree'）.append（''）；
//使用“toggle”类隐藏所有元素
$（'.toggle'）.hide（）；
//捕获切换链接上的单击
$（'a.toggleLink'）。单击（函数（）{
//切换可见性
is_visible=！is_visible；
//根据图元是显示还是隐藏，更改链接
$（this）.html（（！是否可见）？showText:hideText）；
//$（this.html）（$（this.html（）==hideText）？showText:hideText）；
//切换显示-取消注释下一行的基本“手风琴”样式
//$（'.toggle'）.hide（）；$（'a.toggleLink'）.html（showText）；
$（this.parent（）.next（'.toggle'）.toggle（'slow'）；
//返回false，因此不遵循任何链接目标
返回false；
});
});

如果您能帮助解决此问题，我们将不胜感激

---

Marz

代码实际上有一个单独的标志，用于检查所有隐藏div的可见性。需要检查正在切换的特定div当前是否隐藏

    // change the link depending on whether the element is shown or hidden
    if( $(this).parent().next(".toggle").is(':visible') ) {
              $(this).html(showText);
    }
    else{
              $(this).html(hideText);   
    }

我已经更新了小提琴来检查这一点

---

问题在于布尔值是可见的。如果单击第一个链接，则其设置为false。如果您单击第二个元素（没有再次单击第一个元素），它仍然为false。

代码中的问题是

使用相同的var

可以切换元素

每次切换内容的可见性时，我们都必须检查相应div的可见性

    $(this).html( ($(this).parent().next('.toggle').is(":visible")) ? showText : hideText);

做了一些重写，这更有意义：

$(function() {
    var showText = 'MORE ↓',
        hideText = 'LESS ↑';

    $('.toggle').hide().prev('.moree')
                .append('<a href="#" class="toggleLink">' + showText + '</a>');

    $('a.toggleLink').click(function(e) {
        e.preventDefault();
        var is_visible = $(this).closest('.moree').next('.toggle').is(':visible');
        $(this).html(is_visible ? showText : hideText)
               .parent().next('.toggle').toggle('slow');
    });
});​

$（函数（）{
var showText='MORE&darr；'，
hideText='LESS&uarr；'；
$（'.toggle'）.hide（）.prev（'.moree'））
.附加（“”）；
$（'a.toggleLink'）。单击（函数（e）{
e、 预防默认值（）；
var is_visible=$（this）.closest（'.moree'）。next（'.toggle'）。is（':visible'）；
$（this）.html（是否可见？showText:hideText）
.parent（）.next（'.toggle'）.toggle（'slow'）；
});
});​

它在小提琴上工作，但在我的网站上不起作用。。但我改变了阿披舍克在其帖子中建议的路线，从而实现了这一目标这么好的解决方案，我不明白为什么没有更多的投票权。。。