jQuery SlideDown, slideUp

Question

有人能解释为什么第二次点击功能不起作用吗？

var $j = jQuery.noConflict();
$j(function(){
    $j('#quick-links-toggle').click(function(){
        $j('#quick-links-module').slideDown(300);
        $j(this).text('Hide links');
        $j(this).attr('id','quick-links-hide');
    });
    $j('#quick-links-hide').click(function(){
        $j('#quick-links-hide').slideUp(300);
    });
});

Answer 1

这是因为附加事件处理程序的方式。您将事件处理程序附加到文档就绪上，但您正在动态更改元素ID。

绑定事件处理程序时，DOM中不存在ID为quick-links-hide的元素。

您需要委托该事件，或者在同一个单击事件中处理此场景。

var $j = jQuery.noConflict();
$j(function(){
    $j('#quick-links-toggle').on('click', function() {
        if($j('#quick-links-module').is(':visible')) {
            $j('#quick-links-module').slideUp(300);
            $j(this).text("Show links");
        } else {
            $j('#quick-links-module').slideDown(300);
            $j(this).text('Hide links');
        }
    });
});

此外，第二处理程序正在滑动链接，而不是链接模块。我不相信这种行为是故意的，因为链接模块是最初显示的。我已经在上面的代码片段中更正了它。现在quick-links-toggle控制quick-links-module的可见性。

Answer 2

您必须在动态添加的元素上使用.on((代替click((：

http://api.jquery.com/on/

var $j = jQuery.noConflict();
$j(function(){
    $j('#quick-links-toggle').click(function(){
        $j('#quick-links-module').slideDown(300);
        $j(this).text('Hide links');
        $j(this).attr('id','quick-links-hide');
    });
    $j(document).on('click', '#quick-links-hide', (function(){
        $j('#quick-links-hide').slideUp(300);
    });
});

Answer 3

 $( "#clickme" ).click(function() {
  $( "#book" ).slideToggle( "slow", function() {
    // some other code 
  });
});

这是更好的方式。。。

Answer 4

您可以像一样简单地完成此操作

$(function () {
  $('#quick-links-toggle').click(function () {
    var txt = $(this).text();
    $(this).text((txt=="Show Links")? "Hide Links" : "Show Links" );
    $('#quick-links-module').slideToggle(300);
  });
});

演示

Answer 5

以这种方式将代码放入文档就绪方法中。。。再见！

$( document ).ready(function() {
var $j = jQuery.noConflict();
$j('#quick-links-toggle').click(function(){
        if ($j(this).text != 'Hide links')
        {
             $j('#quick-links-module').slideDown(300);
             $j(this).text('Hide links');
        }
        else
        {
             $j('#quick-links-module').slideUp(300);
             $j(this).text('Show links');
        }
    });
});

动态更改元素的id需要使用jQuery"on"方法。