IE показывает два div вместо одного

0

Я сделал кнопку, которая показывает и скрывает 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();
    });
});

Снимок экрана, показанный ниже:

Изображение 174551

  • 0
    покажите свою HTML структуру.
  • 0
    Это поможет ответить на ваш вопрос, если вы сможете опубликовать HTML-разметку для кнопки, которую вы создали.
Показать ещё 4 комментария

1 ответ

1

Попытайтесь изменить часть своего кода. Вам нужно передать объект события в обработчик. В IE фактически есть объект window.event. Возможно, это вызывает проблему:

.click(function(event) {
    $(".hide-search-button").slideToggle("slow");
    event.preventDefault();
});
  • 0
    JQuery работает, но все еще показывает дополнительный div.
  • 0
    Никто не может помочь ..?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню