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

Demo

Answer 5

以这种方式将代码放在文档就绪方法中...... Adios！

$( 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'方法。