IE显示两个div而不是一个

Question

我创建了一个按钮，使用div显示并隐藏jQuery点击。但IE显示另一个额外的div和其他浏览器正确显示它。

<div class="hide-search-button">
   <div class="l-f-w" id="locate"> 
    <h1> Location </h1>
      <input type="hidden" value="" id="loc_hidden"/>

      <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><h1>State</h1></td>
    <td> <select onChange="selectCity(this.options[this.selectedIndex].value)" name="state_name" id="state_name">
   <option value="Choose">Choose</option>
   <?php

   //connect with database
$sqlCountry="select DISTINCT state from sheet1
             order by state  asc ";
$resCountry=mysql_query($sqlCountry);
$checkCountry=mysql_num_rows($resCountry);
// fetch all country
     while($rowCountry=mysql_fetch_array($resCountry)){
   ?>
     <option value="<?php echo $rowCountry['state']?>">
            <?php echo $rowCountry['state']?>
     </option>
   <?php
   }
   ?>
</select></td>
  </tr>
  <tr>
    <td><h1>Region</h1></td>
    <td><select id="region_name" name="region_name"
     onchange="selectState(this.options[this.selectedIndex].value)">
 <option value="Choose">Choose</option>
</select>
       </td>
  </tr>
  <!--<tr>
    <td><h1>Suburb</h1></td>
    <td><select id="suburb_name"  name="suburb_name">
 <option value="Choose">Choose</option>
</select></td>
  </tr>-->
  <tr>
    <td><h1>Pin Code</h1></td>
    <td> <input type="text"value=" " name="pin"  id="pin"></td>
  </tr>
</table>         

 <input type="hidden" value="2" name="searchform" />       
 <script>
 function span_go()
 {
 //var locate = document.getElementById("menuSelection").innerHTML;
 var service = document.getElementById("sertype").innerHTML;
 //document.getElementById("locatetext").value = locate;
 document.getElementById("servicetext").value = service;
 //alert (service);
 }
 </script>
  <input type="hidden" value="" id="servicetext" name="servicetext"/>
        <?php /*?><a tabindex="0" href="menuContent.html" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flyout"><div class="arrow_wrap"><span class="ui-icon ui-icon-triangle-1-s"></span> </div> <span id="menuSelection"> <?php echo $location ?></span></a><?php */?>

    </div> <!-- location field wrapper ends here -->

   <div class="service_type_wrap s-t-w"> 
     <h1> Service Type </h1>
       <select multiple="multiple" label="choose" style="margin-left:8px;" name="tex_value" id="worktype">

       <option value="Long Day Care">Long Day Care</option>

        <option value="Occasional Care">Occasional Care</option>

        <option value="In Home Care">In Home Care</option>

        <option value="Before School Care">Before School Care</option>

        <option value="After School Care">After School Care</option>

        <option value="Vacation">Vacation Care</option>

        <option value="Special Care">Special Care</option>

        <option value="Permanent / Contract">Permanent / Contract</option>

          <option value="Part time">Part time</option>

      </select>
    </div> <!-- service type wrapper ends here -->

  <div class="f-r-w" style="margin-left:10px;">
    <h1> Filter Results </h1>
      <select data-placeholder="<?php echo $sorting; ?>" class="chzn-select" style="width:200px;" tabindex="2"name="q_state" id="jobsort">



            <option value="title">Sort by job title</option>

            <option value="date">Sort by date</option>

      </select> 
  </div> <!-- filter results wrapper ends here -->


  <div class="go_button_wrap">
    <input name="submit" type="submit" value="Go" id="custum_button" onclick="span_go();">
  </div> <!-- go button ends here -->
 </form>

</div>

JS：

$(document).ready(function() {
    $("#button").toggle(function() {
        //$(this).text('Hide Advance Search');
    }, function() {
        //$(this).text('Show Advance Search');
    }).click(function(){
        $(".hide-search-button").slideToggle("slow");
        event.preventDefault();
    });
});

屏幕截图如下：

Answer 1

尝试更改代码的部分内容。您需要将事件对象传递给处理程序。在IE中实际上有window.event个对象。也许它会导致这个问题：

.click(function(event) {
    $(".hide-search-button").slideToggle("slow");
    event.preventDefault();
});