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/

正如你可以在小提琴看到，該腳本工作良好，當你打開並關閉一個div。但一旦你開始打開和關閉第二個div，而第一個仍然是開放的，問題開始......

我只想讓它在任何時候工作，不管是否沒有或所有的div目前已開放。

謝謝！

Answer 1

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

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'); 
      }); 
     });