Jquery Slidetoggle：为什么它会重新加载我的页面？答案

【问题标题】：Jquery Slidetoggle: Why does it reload my page?Jquery Slidetoggle：为什么它会重新加载我的页面？
【发布时间】：2012-03-25 06:19:45
【问题描述】：

我在使用两个 slideToggles 时遇到了一个奇怪的问题。 #bannerChoice 幻灯片工作正常，但#search 幻灯片在打开时应该与#bannerChoice 重叠，但不会打开超过中途。相反，它会强制页面重新加载。

这是我的代码：

function bannerChoice()
{
    $('#bannerChoice').slideToggle(function()
    {
        if($('#bannerChoice').is(':visible'))
        {
            $('html').css({overflow:"hidden",height:"100%"});
        }
        else
        {
            $('html').css({overflow:"auto",height:"2171px"});
        }
    });
}

function toggleForm()
{
    $('#search').slideToggle(350);
    return false;
}

和

<div id="bannerChoice">
    <div id="bcText">Select a banner graphic:<br/></div>
    <div id="bcImages">
        <form action="#" method="post">
            <input type="hidden" name="setBanner" id="setBanner" value="">
            <img src="/media/profile/images/bgs/bg1_thumb.png"
                 onClick="setBanner(1,event);"/>
            <img src="/media/profile/images/bgs/bg2_thumb.png"
                 onClick="setBanner(2,event);"/>
            <img src="/media/profile/images/bgs/bg3_thumb.png"
                 onClick="setBanner(3,event)" />
            <img src="/media/profile/images/bgs/bg4_thumb.png"
                 onClick="setBanner(4,event)" /><br/>
            <span id="bcBttns">
                <input type="submit" value="Submit" class="submit"
                 name="bttnSubmit" /><input type="button" value="Cancel"
                 onClick="bannerChoice()">
            </span>
        </form>
    </div>

    <div id="bcBG">&nbsp;</div>
</div>

和

<span onClick="toggleForm()">
    <a href="" style="display:inline-block; color:#bbb; padding:0 13px;
        line-height:70px;">link text</a></span>
    <div style="padding-left:13px; z-index:9004">
        <form id="search" method="post" action="#">
        <input type="text" name="name" value="Name" style="width:112px"/><br/>
        <input type="text" name="city" value="City" style="width:112px" /><br/>
        <input type="text" name="state" value="State" style="width:112px" /><br/>
        <input type="text" name="zip" value="Zip" style="width:112px" /><br/>
        <input type="button" class="submit" style="margin:0 13px 0 13px;"
               value="Search">
    </form>
    </div>

【问题讨论】：

不回答您的问题，但所有这些内联事件处理程序 (onClick) 都被认为是一种相当古老的方法。我建议改为使用 JavaScript 绑定事件。由于您已经在使用 jQuery，请查看 API 文档中的 .on()。
所有的内联 JavaScript 是怎么回事？您正在使用 jQuery，这使得内联 JS 完全没有必要。
很高兴知道。我是 jquery 新手。

标签： toggleclass jquery

【解决方案1】：

jQuery 不会导致您的页面刷新。当您单击跨度中的链接时，页面将转到 url ""，即重新加载当前页面。

您需要在脚本中添加e.preventDefault() 以防止链接执行其默认操作（转到链接）：

function toggleForm(e)
{
    e.preventDefault();
    $('#search').slideToggle(350);
}

您需要在通话中添加event：

onclick='toggleForm(event)'

bannerChoice() 不会重新加载页面，因为它位于取消按钮上，该按钮不会作为其默认操作的一部分发布。

正如其他人所说，内联 Javascript 不是一个好主意。它使代码不可读，难以调试，并阻止您轻松重用代码。没有（好的）理由将内联 Javascript 与 jQuery 一起使用。

【讨论】：

噢！谢谢。我把它放在那里是为了 css 而忘了它。
jQuery 使用“return false”执行某种魔法，执行preventDefault()。使用 preventDefault() 而不是 return false 有充分的理由（这也会停止传播），但您只需要一个或另一个。
顺便说一句，我不是 100% 清楚你希望你的代码如何工作，但这里是一个没有内联 javascript 或 CSS 的代码示例。 jsfiddle.net/jtbowden/6H8Kp
@Greg：是的，我只是在复制粘贴时忘记删除它。但是，这个特殊的 return false 不在 jQuery 处理程序中，所以没有魔法。
哦，所以现在“没有魔法”？？你是谁来粉碎我的梦想？？ JK ..是的，我做了一个不正确的盲目假设。呜呜！

【解决方案2】：

我遇到了同样的问题

<a href="#" id="toggle-trigger">Edit</a>

另一个更简单的选择是不要在链接“a”标签或您的输入提交中使用 href= 来实现页面内的切换。只需使用类似的东西：

<a id="toggle-trigger" style="cursor: pointer;">Edit</a>

或者在您的情况下，一个跨度 div 的样式看起来像一个按钮。

【讨论】：

【解决方案3】：

Is there an easy way to reload css without reloading the page?

使用无需往返服务器即可工作的 innerHtml 属性。

【讨论】：