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

Question

我修改了this script有点满足我的需求，但现在我遇到了一个问题，我找不到解决方案。

HTML:

<div  class="toggle">

<p>Grumpy wizards make toxic brew for the evil Queen and Jack.</p>

</div><!-- end .toggle -->

<div class="readMoreDiv">    </div><!-- end .readMoreDiv -->


<div  class="toggle">

<p>Grumpy wizards make toxic brew for the evil Queen and Jack.</p>

</div><!-- end .toggle -->

<div class="readMoreDiv">    </div><!-- end .readMoreDiv -->

脚本:

$(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;
    });


});

在此处查看实际操作:http://jsfiddle.net/CeBEh/

正如您在 Fiddle 上看到的，当您仅打开和关闭一个 div 时，该脚本效果很好。但是一旦你开始打开和关闭第二个 div，而第一个 div 仍然打开，问题就开始了......

我想让它始终工作，无论当前是否没有打开或所有 div 都打开。

谢谢!

Answer 1

去掉 is_visible 标志并将 click 函数中的代码更改为:

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();

http://jsfiddle.net/CeBEh/3/