Jquery Slidetoggle：なぜ私のページをリロードするのですか？

Question

2つのslideTogglesに奇妙な問題があります。 #bannerChoiceスライドはうまく動作しますが、開かれたときに#bannerChoiceとオーバーラップする#searchスライドは、途中で開くことはありません。代わりに、ページを強制的にリロードします。

ここに私のコードです：

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> 

Answer 1

jQueryによってページが更新されていません。スパンのリンクをクリックすると、ページはURL「」に移動し、現在のページを再読み込みします。

あなたは（リンクに行く）のデフォルトのアクションを実行することからリンクを防ぐために、スクリプトにe.preventDefault()を追加する必要があります。

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

そして、あなたはあなたの呼び出しにeventを追加する必要があります。

onclick='toggleForm(event)' 

bannerChoice()は、デフォルトの操作の一部として投稿しないキャンセルボタン上にあるため、ページをリロードしません。

他の人がここで述べたように、インラインのJavascriptは良い考えではありません。コードを読むことが難しく、デバッグが難しく、コードを簡単に再利用できなくなります。 jQueryでインラインJavascriptを使用する理由はありません。

Answer 2

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

ワットの作品innerHTMLプロパティを使用しますサーバーへの往復なし。

Answer 3

私は

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

別の、より簡単なオプションを使用して同じ問題を持っていた、ページ内のトグルの目的のために、「」タグ、またはあなたの入力が提出したリンクで=のhrefを使用していません。

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

または、あなたのケースでは、ボタンのように見えるスタイルになっています。