Javascript 即显示两个div而不是一个div

我用

jQuery

制作了一个按钮，在单击时显示和隐藏

div

。但是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>

屏幕截图如下所示：

---

尝试更改部分代码。您需要将事件对象传递到处理程序中。在IE中实际上有

window.event

对象。也许是因为这个原因：

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

---

显示您的html结构。如果您可以发布所创建按钮的html标记，这将有助于回答您的问题。您使用的是一种不推荐使用的

toggle（）

，已在jQuery 1.9中删除。有关如何替换它的信息，请参阅。@Barmar您的意思是我必须更改jquery部分，无需更改html。？没错。不过，我认为这与你的问题无关。这只是建议停止使用过时的函数。

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