开发者

Where in this code do I need to put 'return false'?

When I click on the 'slide-toggle' link, my url turns from mysite.com to mysite.com/#

I was told that I needed to put a 'return false' somewhere in here but I'm not sure where. Can someone kindly help me out?

$(document).ready(function() {
    $('a#slide-up').click(function () {
        $('.slide-container').slideUp(function(){
            $('#slide-toggle').removeClass('active');
        });
        return false;
    });

    $('a#slide-toggle').click(function() {
        var slideToggle = this;
        if ($('.slide-container').is(':visible')) {
            $('.slide-container').slideUp(function() {
                $(slideToggle).removeClass('active');
            });
        }
        else {
            $('.slide开发者_运维知识库-container').slideDown();
            $(slideToggle).addClass('active');
        }
    });
});


It would be nicer not to use return false but to use event.preventDefault instead. You can put this at the very top of your event handler:

$('a#slide-toggle').click(function(e) { // note e added as the function's parameter
    e.preventDefault();

    var slideToggle = this;
    if ($('.slide-container').is(':visible')) {
        $('.slide-container').slideUp(function() {
            $(slideToggle).removeClass('active');
        });
    }
    else {
        $('.slide-container').slideDown();
        $(slideToggle).addClass('active');
    }
});

This has the same effect as return false, but with the following advantages:

  • It is semantically more logical -- it does what it says
  • You can put it at the head of the function, so it is immediately obvious
  • You can have multiple exit points without having to ensure they are all return false
  • If any part of your code causes an error, the default action will still be prevented


like this:

    $('a#slide-toggle').click(function() {
        var slideToggle = this;
        if ($('.slide-container').is(':visible')) {
            $('.slide-container').slideUp(function() {
                $(slideToggle).removeClass('active');
            });
        }
        else {
            $('.slide-container').slideDown();
            $(slideToggle).addClass('active');
        }
        return false;
    });


Probably you need to add the return false also in the $('a#slide-toggle').click() function

$(document).ready(function() {
    $('a#slide-up').click(function () {
        $('.slide-container').slideUp(function(){
            $('#slide-toggle').removeClass('active');
        });
        return false;
    });

    $('a#slide-toggle').click(function() {
        var slideToggle = this;
        if ($('.slide-container').is(':visible')) {
            $('.slide-container').slideUp(function() {
                $(slideToggle).removeClass('active');
            });
        }
        else {
            $('.slide-container').slideDown();
            $(slideToggle).addClass('active');
        }
        **return false;**
    });
});


I think, it should be like this:

$('a#slide-toggle').click(function() {
        var slideToggle = this;

        if ($('.slide-container').is(':visible')) {
            $('.slide-container').slideUp(function() {
                $(slideToggle).removeClass('active');
            });
        }
        else {
            $('.slide-container').slideDown();
            $(slideToggle).addClass('active');
        }

        return false;
    });


You have one at the end of slide-up; add one to the end of slide-toggle.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜