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

我有一个奇怪的问题与两个slideToggles。 #bannerChoice幻灯片工作正常，但#search幻灯片应该在打开时重叠#bannerChoice，从不打开多于中途。相反，它会强制页面重新加载。Jquery Slidetoggle：它为什么重新加载我的页面？

这里是我的代码：

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>

来源

2012-03-07 zzxjoanw

不回答你的问题，但所有这些内联事件处理程序（'onClick'）都被认为是一个相当古老的方法。我建议用JavaScript代替绑定事件。由于您已经在使用jQuery，请查看API文档中的.on（）。 – 2012-03-07 17:29:40

什么是所有的内嵌JavaScript？你正在使用jQuery，这使得内联JS完全没有必要。 – Sparky 2012-03-07 17:31:30

很高兴知道。我是一个jQuery新手。 – zzxjoanw 2012-03-07 17:33:33

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

您需要添加e.preventDefault()到你的脚本，以防止执行其默认动作的链接（将链接）：

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

而且你需要添加event您的来电：

onclick='toggleForm(event)'

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

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

来源

2012-03-07 17:34:09

Doh！谢谢。我把那个放到了css里，忘了它。 – zzxjoanw 2012-03-07 17:36:38

所以用正确的答案标记他！ – Har 2012-03-07 17:41:13

jQuery通过执行'preventDefault（）'的“return false”做了某种魔术。有很好的理由使用'preventDefault（）'而不是'return false'（它也会停止传播），但是这里只需要一个或另一个。 – 2012-03-07 17:51:44

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

使用innerHTML属性是工件W.没有往返服务器。

来源

2012-03-07 17:30:21 Har

我不得不使用

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

另一个更简单的选择，不使用HREF同样的问题=在链接“一”的标签，或者你输入提交，当切换的目的页内。只需使用类似的东西：

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

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

来源

2014-03-07 14:55:32 Acyra

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

回答

相关问题