jQuery toggle(）函数工作不正常

the jQuery toggle() function is not working correctly

本文关键字：工作 不正常 函数 toggle jQuery      更新时间：2024-03-03

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

我有一个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>

我搞不清我的代码出了什么问题。请帮帮我。谢谢

在这种情况下，您应该使用preventDefault()，因为它是一个锚点：

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

jsFiddle在这里

相关文章：