jQuery：「顯示所有評論」點擊並隱藏成功？

Question

我現在有這個權利：

<a href='javascript:showComments($displayWall[id]);' style='cursor: pointer;'>Show all $isThereAnyComments comments</a> 

論showComments成功，我想讓它顯示這個div：

#showWallCommentsFor + wallID 

然後當它顯示的話，就應該改變「全部顯示」，以「關閉」，然後它應該隱藏div。我怎樣才能做到這一點？

Answer 1

我的建議是有一些jQuery的教程快速去，因爲你所描述的，一旦你已經看到了一些例子，並已瞭解的基礎知識應該是放在一起很簡單的功能。

http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

http://docs.jquery.com/Tutorials:Live_Examples_of_jQuery

http://www.w3schools.com/jquery/default.asp

Answer 2

var toggle = false; 
$(function() { 
    $('a.comments').click(function(e) { 
     var $this = $(this); 
     $('.toggleComments').toggle(1000,function() { 
      if(!toggle) { 
       $this.text('Hide Comments'); 
       toggle = !toggle; 
      }else { 
       $this.text('Show Comments'); 
       toggle = !toggle; 
      } 
     }); 
     e.preventDefault(); 
    }); 
}); 

測試上面的代碼@http://jsbin.com/azuro3

Answer 3

HTML：

<div id="comments"> 
    <!-- comments here --> 
</div> 
<a href="#" class="commentsBtn">Show Comments</a> 

的Jquery：

//Start with comments hidden 
$('#comments').hide(); 
//Attach click event to button 
$('.commentsBtn').click(function() { 
    $('#comments').slideToggle('slow'); 
    $(this).text($(this).text() == 'Hide Comments' ? 'Show Comments' : 'Hide Comments'); 

    //Kill the default function of the anchor tag 
    return false; 
}); 

CSS：

.commentsBtn { cursor: pointer; } 

• 內聯應該儘可能避免，在這種情況下，JavaScript和CSS。
• 請確保您的評論有一個容器div，並指定id或class，也許id =「comments」。
• 添加一個類你的節目評論的鏈接，你可以用它來申請你的CSS樣式，並在你的jQuery選擇。

如果讓你用它打通我知道！所有最優秀的