Question

我有以下幻灯片效果，当您连续按两次相同的按钮时不起作用。意思是，您选择红色按钮以显示其颜色，再次按红色以隐藏该颜色。当您第三次按它时，它将无法工作。要让红色再次起作用，您需要选择不同的颜色。所有按钮都会发生这种情况。我怎么阻止这个？ fiddle demo

// When the DOM is ready, initialize the scripts.
jQuery(function( $ ){

    // Get a reference to the container.
    var container = $( ".container" );

    // Bind the link to toggle the slide.
    $( "a" ).click(function( event ){
        // Prevent the default event.
        event.preventDefault();
        var $this = $(this);
        var $target = $("#target");

        if ($target.attr("class") === $this.attr("data-color")) {
            container.slideUp(500);
        } else {
            // Hide - slide up.
            container.slideUp(500, function(){
                $target.attr("class", $this.attr("data-color"));
                // Show - slide down.
                container.slideDown(500);
            });
        }
    });

});

Answer 1

一旦颜色向下滑动，您必须删除class属性，否则它会通过您的条件：

container.slideUp(500, function() {
     $target.removeAttr("class");
});

演示：http://jsfiddle.net/k5L5N/2/

按连续按钮时按钮不起作用

1 个答案: