jQuery toggle（）函數無法正常工作

Question

是否可以使用jQuery toggle()函數隱藏和顯示特定的html table row ？

我有一個html表，在其第二行中包含html form 。 我希望當用戶單擊“ Show detals鏈接但jQuery toggle()函數無法正常工作時Show detals該表單。 每當我單擊“ Show Details鏈接時，它就會顯示隱藏的表行，然后同時再次將其隱藏。 下面是我的代碼。

jQuery代碼

$(document).ready(function(){
      $('.update_form').hide(); //hides the <tr> tag when the document is ready

      $('#details').click(function(){
          $('.update_form').toggle();
      });
});

我試圖將toggle()和click()事件與我的元素綁定在一起，但是除非我使用$(document).ready()事件，否則該方法將不起作用。

但是，當它起作用時，單擊“ Show Details鏈接將顯示隱藏的元素，然后同時隱藏它，甚至無需等待第二次單擊。

html

 <div class="static_archive">
   <table>
     <tr>
       <td><b>Ref #:148542657 Title of the ad (468x60)</b><br />Active Running..</td>
       <td>Displayed:0<br />Days Left:30</td>
       <td>
         <a id="pause" href="">Pause</a>
         <a id="details" href="">Show Details</a>
         <a id="activate" href="">Activate</a></td>
     </tr>
     <tr class="update_form"> //I want to this tr for hide and show.
         <td colspan="3"  >
            <div >
               <form>
                  <div class="form_controls">                        
                    <label class="field_label">Banner Title:</label>
        <div class="field_input">
                       <input type="text"  name="banner_title" />                     
        </div>
                 </div>
                 <div class="form_controls">
           <label class="field_label">Banner URL:</label>
           <div class="field_input">
                      <input type="text"  name="banner_url" /> 
           </div>
                </div>
                <div class="form_controls">
          <label class="field_label">Target URL:</label>
          <div class="field_input">                                                                      
                      <input type="text"  name="target_url" />   
          </div>
                </div>
                <div class="form_controls">
           <label class="field_label">Banner Budget:</label>
           <div class="field_input">
                      <input type="text"  name="banner_budget" />  
           </div>
                </div>
                <br />
               <div class="form_bottom">                         
                  <input type="submit" value="Update!" />
               </div>
         </form>                                            
      </div>
         </td>
    </tr>
    <tr>
      <td id="td_img" colspan="3">
            <img src="<?php echo base_url();?>public/images/2.jpg" />
      </td>
    </tr>
</table>

我無法弄清楚我的代碼出了什么問題。 請幫幫我。 謝謝。

Answer 1

在這種情況下，您將使用preventDefault() ，因為它是一個錨點：

$('#details').click(function(e){
   e.preventDefault();
   $('.update_form').toggle();
});

jsFiddle在這里。