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：它爲什麼重新加載我的頁面？

回答

相關問題