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/

正如你在小提琴上看到的那样，当你打开和关闭一个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/

Answer 2

问题是您在回调中使用的is_visible变量。任何a.toggleLink都会改变该值。尝试使用额外的类来识别div是否可见，或其他什么。

Answer 3

http://jsfiddle.net/CeBEh/1/

删除is_visible并检查所点击链接的实际文字。

Answer 4

如果你这样做会怎么样：

HTML：

    <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>

的javascript：

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

jquery + Simple Toggle Script +在一个站点上使用多次

4 个答案: