JQuery回調...？

Question

感謝您的任何幫助..這裏是我的問題： 下面的代碼，當點擊閱讀更多...鏈接應該顯示鏈接下的div，但只有在所有其他可能的div隱藏後... 我需要在回調中原樣使用它，但如果這樣使用，第一個鏈接將正確顯示，最後三個顯示，然後隱藏，然後顯示...幫助！

的Javascript：

var more_text="Read More..."; 
var less_text="Read Less..."; 

jQuery(document).ready(function() { 
    $j(".dropdown").click(function() { 
     if ($j(this).html() == more_text){ 
      var that = $j(this); 
      $j(".extra").slideUp(function() { 
       $j(".dropdown").html(more_text); 
       that.html(less_text); 
       that.next(".extra").slideDown(); 
      }); 
     } 
    }); 
}); 

HTML：

<div class="dropdown">Read More...</div> 
<div class="extra" style="display: none;">Here is more text!!</div> 

<div class="dropdown">Read More...</div> 
<div class="extra" style="display: none;">Here is more text!!</div> 

<div class="dropdown">Read More...</div> 
<div class="extra" style="display: none;">Here is more text!!</div> 

<div class="dropdown">Read More...</div> 
<div class="extra" style="display: none;">Here is more text!!</div> 

Answer 1

的問題是，當你調用$j(".extra").slideUp(...一些與extra類的元素都已經隱藏起來，所以那些導致回調立即開火，那麼當需要關閉的那個關閉完成時，你會再次觸發回調。將該行更改爲：

$j(".extra").slideUp().promise().done(function() { 

我認爲它會按照您期待的方式工作。

Answer 2

您必須過濾元素以向上滑動。你應該使用這個：

jQuery(document).ready(function() { 
    $j = jQuery; 
    $j(".dropdown").click(function() { 
     if ($j(this).html() == more_text){ 
      var that = $j(this); 
      if ($j(".extra").filter(":visible").length > 0) { 
       $j(".extra").filter(":visible").slideUp(function() { 
        $j(".dropdown").html(more_text); 
        that.html(less_text); 
        that.next(".extra").slideDown(); 
       }); 
      } 
      else { 
       $j(".dropdown").html(more_text); 
       that.html(less_text); 
       that.next(".extra").slideDown(); 
      } 
     } 
    }); 
}); 

這也有一個條件，檢查是否沒有任何.extra元素是可見的，並且不會滑動的任何元素，如果最高讓利是可見的。

http://jsfiddle.net/vExYL/