Question

我使用以下代码来显示/隐藏按预期工作的div，除了当我点击显示/隐藏时它一直跳下来的事实......

JS小提琴如下： http://jsfiddle.net/w3dwu0r2/1/

虽然这确实显示了代码，但它并没有真正突出问题，因为在真实环境中它开始跳跃（我已经将所有脚本排除在外） - 也许是一个jQuery专家可以协助，我尝试添加返回false; - 例如

$('.nav-toggle').click(function(){

        var collapse_content_selector = $(this).attr('href');
return false;

但是这会杀死剧本，我已经尝试了各种其他地方，但导致剧本不再显示/隐藏div，希望有人可以协助。

Answer 1

尝试使用event.preventDefault();。这是代码

$(document).ready(function () {
    $('.nav-toggle').click(function (e) { //<===== pass the event
        e.preventDefault();               //<===== prevent the default event from execution
        //get collapse content selector
        var collapse_content_selector = $(this).attr('href');
        //make the collapse content to be shown or hide
        var toggle_switch = $(this);

        $(collapse_content_selector).toggle(function () {
            if ($(this).css('display') == 'none') {
                //change the button label to be 'Show'
                toggle_switch.html('Show');
            } else {
                //change the button label to be 'Hide'
                toggle_switch.html('Hide');
            }
        });
    });

});

<强> FIDDLE DEMO

Answer 2

当然它会跳跃，因为你使用带有跳跃点的常规锚点（＃collapse2）。

我不喜欢使用href-attribute进行那种数据传输。如果您必须使用锚标记，请使用

<a href="javascript: return false;" data-toggle="#collapse1" class="nav-toggle">Show</a>

并将您的javscript更改为：

var collapse_content_selector = $(this).attr('data-toggle');

如果您不喜欢href中的javascript，只需使用按钮标记

<button data-toggle="#collapse1" class="nav-toggle">Show</button>

就像一个魅力，没有跳跃： - ）

第三种解决方案当然是添加

e.preventDefault();

在你的js方法中，就像他的回答中所说的Think Different一样

jQuery：返回错误的问题

2 个答案: