Javascript jquery+；简单切换脚本+；在一个站点上使用多次

我根据自己的需要做了一些修改，但现在我遇到了一个问题，我找不到解决办法

HTML:

脾气暴躁的巫师们为邪恶的女王和杰克酿造有毒的啤酒

脾气暴躁的巫师们为邪恶的女王和杰克酿造有毒的啤酒

脚本：

$(document).ready(function() {


    // Andy Langton's show/hide/mini-accordion - updated 23/11/2009
    // Latest version @ http://andylangton.co.uk/jquery-show-hide
    var showText='down';
    var hideText='up';

    // initialise the visibility check
    var is_visible = false;

    // insert Show/hide links in the readMoreDiv
    $('.toggle').next('.readMoreDiv').html('<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);

        // toggle the display
        $(this).parent().prev('.toggle').slideToggle();
        return false;
    });


});

$（文档）.ready（函数（）{
//安迪·兰顿的表演/隐藏/迷你手风琴-2009年11月23日更新
//最新版本@http://andylangton.co.uk/jquery-show-hide
var showText='down'；
var hideText='up'；
//初始化可见性检查
var为可见=假；
//在readMoreDiv中插入显示/隐藏链接
$（'.toggle'）.next（'.readMoreDiv'）.html（''）；
//使用“toggle”类隐藏所有元素
$（'.toggle'）.hide（）；
//捕获切换链接上的单击
$（'a.toggleLink'）。单击（函数（）{
//切换可见性
is_visible=！is_visible；
//根据图元是显示还是隐藏，更改链接
$（this）.html（（！是否可见）？showText:hideText）；
//切换显示
$（this.parent（）.prev（'.toggle'）.slideToggle（）；
返回false；
});
});

在此处查看它的实际操作：

正如您在Fiddle上看到的，当您打开和关闭一个div时，脚本运行良好。但是当您开始打开和关闭第二个div时，第一个div仍然打开，问题就开始了

我只想让它在任何时候都能工作，不管目前是否有或所有div都是开放的

---

谢谢

问题在于您在两个回调中使用的是可见变量。任何a.toggleLink都将更改该值。尝试使用一个额外的类来标识div是否可见或其他内容。

去掉is_visible标志，并将单击函数中的代码更改为：

var toggleDiv = $(this).parent().prev('.toggle');
// change the link depending on whether the element is shown or hidden
$(this).html(toggleDiv.is(":visible") ? showText : hideText);

// toggle the display
toggleDiv.slideToggle();

---

“删除”是可见的，并检查所单击链接的实际文本。

如果改为使用这种方式，该怎么办：

Html:

---

你好，斯莱弗森！谢谢你的快速回复，但是你有什么改变的建议吗？我是一个javascript初学者，我不知道在哪里进行更改。对我来说，“is_visible=！is_visible；”行似乎改变了可见性状态，但obv。它不起作用。请将当前的.html（）与showtext/hidetext进行比较，或者使用一个额外的类，或者按照其他人的建议使用.is（'visible'）Hi BNL！谢谢你的帮助，但是我注意到当我使用图片而不是文本来进行上下链接时，它似乎不起作用。然而Richard D的修复方案成功了。哦，如果你想要整洁的幻灯片效果，只需编写slideToggle而不是toggle。如下所示：$（this.parent（）.find（'p'）.slideToggle（）；

var toggleDiv = $(this).parent().prev('.toggle');
// change the link depending on whether the element is shown or hidden
$(this).html(toggleDiv.is(":visible") ? showText : hideText);

// toggle the display
toggleDiv.slideToggle();

    <div>
        <p class='toggleMe'> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
        <a class="toggle">
            Hide box
        </a>
    </div>
    <div>
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
        <a class="toggle">
            Hide box
        </a>
    </div>

    $(document).ready(function(){
          $('.toggle').click(function(){
                $(this).parent().find('p').toggle();
                $(this).text($(this).text() == 'Show box' ? 'Hide box' : 'Show box');
            });
        });