Блог

Я работал сегодня и решил начать использовать JQUERY для создания таблицы переключения для поискового сайта… но я буквально запустил javascript и jquery пару дней назад. Без таблицы это работает нормально, но когда я добавляю таблицу, она не переключает таблицу…Я хочу, чтобы при нажатии на фильтр поиска таблица отображалась внизу, а затем, когда вы снова нажимаете на фильтр поиска, чтобы скрыть таблицу… Любая помощь очень ценится. Вот код (у меня уже есть ссылка на jquery в заголовке)

 <div class='filtermore'>
  <h4><a>Filter Search</a></h4>
  <p style="display: none" class='jquery'>

  <table border=0 width="875">
       <tbody>
          <tr>
             <td width="164"><strong>City</strong></td>
             <td width="176"><strong>Price</strong></td>
             <td width="160"><strong>Features</strong></td>
          </tr>
           <tr>
             <td><input type="checkbox"/> City 1</td>
             <td><input type="checkbox"/> Cheap</td>
             <td><input type="checkbox"/> Financing Available</td>
             <td width="357"><input type="checkbox"/> Good for kids</td>
          </tr>
           <tr>
             <td><input type="checkbox"/> City 2</td>
             <td><input type="checkbox"/> Moderate</td>
             <td><input type="checkbox"/> Smoking</td>
             <td><input type="checkbox"/> Accepts Credit Cards</td>
          </tr>
           <tr>
             <td><input type="checkbox"/> City 3</td>
             <td><input type="checkbox"/> Expensive</td>
             <td><input type="checkbox"/> Alcohol</td>
             <td><input type="checkbox"/> Delivery</td>
           </tr>
        </tbody>
     </table>
  </p>
<script>
$("h4").click(function () {
$(".jquery").toggle("slow");
});
</script>


</div>
  

Технически вы указываете на переключение тегу <p>, а не таблице. Хотя вы предполагаете, что таблица будет наследоваться от <p>, таблицы являются устаревшими и отображаются по-разному в каждом браузере, поэтому вы не можете рассчитывать на их внимание. Я бы добавил идентификатор в таблицу и вызвал toggle для нее или использовал дочерний селектор в jQuery (который вы наверняка не изучили в первую неделю), чтобы напрямую настроить таргетинг на таблицу. Что-то вроде этого:

 <table id="mytable">

$('#mytable').toggle('slow');

// or child selector method
$('.jquery table').toggle('slow'); 

// or another method, more advanced, but the same idea would be
$('.jquery :first-child').toggle('slow');