Функция jquery hide()

Question

Я пытаюсь создать скользящее меню FAQ с помощью jQuery, но я получаю сообщение об ошибке, которое указывает, что свойство hide() равно null. Я пробовал это в Chrome и Firefox на Mac и Firefox на Win. Вот код:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<script type="text/javascript"> 

$(document).ready(function(){ 

    $('.hide').hide(); 

    $('h5').click(function(){ 
    $(this).next().slideToggle("slow"); 
    return false; 
}); 


}); 

А вот HTML:

<a href="#" ><h5 >The Heading </h5></a><br /> 

<div class="hide"> 
The content. 
</div> 

Я провел последние три часа обливание книги и учебники в Интернете, и все выглядит правильно, но, по-видимому, нет. : P

Любая помощь очень ценится.

Answer 1

Обновление: после публикации Ant публичный URL-адрес страницы, я могу с уверенностью повторить свое утверждение о том, что в образце кода, отправленном Ant, в его первоначальном вопросе нет проблем, поэтому спасибо, кто бы ни проголосовал за меня. Проблема в том, что на странице Ant используются как прототипы, так и библиотеки jQuery. Этот факт опущен из первоначального вопроса. Эти две библиотеки конфликтуют с переменной $. Если вы измените код Ant, чтобы использовать ключевое слово JQuery вместо $ везде, как

jQuery(document).ready(function() { 
    jQuery('.hide').hide(); 

    jQuery('.toggler').click(function() { 
     jQuery(this).nextAll('.hide:first').slideToggle("slow"); 
     return false; 
    }); }); 

Я уверен, что ваш код будет работать. В качестве альтернативы вы можете использовать технику не конфликтный, как описано на страницах JQuery здесь

http://api.jquery.com/jQuery.noConflict/

Там нет ничего плохого с кодом. Можете ли вы разместить это на общедоступном сайте и поделиться им? Единственное, о чем я могу думать, это то, что jQuery не втягивается.

Попробуйте переместить

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 

в Головном теге

и остальная части яваскрипта кода после закрытия

</HTML> 

тег

Answer 2

Ваш .click() обработчик на <h5> элемент, оттуда он пытается скрыть .next()родственный элемент ... есть не какой-либо из них.

Вместо этого:

$(this).next().slideToggle("slow"); 

Вам потребуется что-то вроде .nextAll() (который выполняет поиск всех последующих братьев) на <a>:

$(this).parent().nextAll('.hide:first').slideToggle("slow"); 

You can try it out here.

---

В качестве альтернативы, может быть, немного чище, вы можете добавить класс к якорю, чтобы упростить вещи, как это:

<a class="toggler" href="#"><h5>The Heading </h5></a><br /> 

<div class="hide"> 
The content. 
</div> 

Тогда, так как вы на <a>, вы не нужен .parent() вызов, как это:

$(document).ready(function() { 
    $('.hide').hide(); 

    $('.toggler').click(function() { 
     $(this).nextAll('.hide:first').slideToggle("slow"); 
     return false; 
    }); 
}); 

You can try that version out here.

Answer 3

Я взбитый до небольшого , простой пример того, как это сделать (DEMO). Я думаю, что это может быть немного чище, чем ваш текущий метод. Мне никогда не нравилось использовать <a> в качестве заголовка.

HTML

<div class="accItem"> 
    <div class="togHead">Heading1</div> 
    <div class="togContent">The content1</div> 
</div> 

<div class="accItem"> 
    <div class="togHead">Heading3</div> 
    <div class="togContent">The content3</div> 
</div> 

JS

$('.togContent:first').slideDown(); 
$('.togHead').click(function(){ 
    var item = $(this).parent().find('.togContent'); 
    if (! $(item).is(':visible')){ 
     $('.togContent').slideUp(); 
     $(item).slideDown("fast"); 
    }    
}); 

CSS

.togHead{ 
    width:300px; 
    background:#000; 
    color:#fff; 
    font-size:20; 
    font-weight:bold; 
    cursor:pointer; 
} 
.togContent{ 
    display:none; 
    width:300px; 
    background:#ff0;  
}