Question

是否可以使用html table row功能隐藏和显示特定的jQuery toggle()？

我有一个html表，其第二行包含html form。我希望在用户点击Show detals链接时显示该表单，但jQuery toggle()功能无法正常工作。每当我点击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 here.

jQuery toggle（）函数无法正常工作

1 个答案: