JQuery Hide () функция - PullRequest
Новая
       2

JQuery Hide () функция

0 голосов
/ 31 марта 2011

Я пытаюсь создать скользящее меню часто задаваемых вопросов, используя 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

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

Ответы [ 3 ]

4 голосов
/ 31 марта 2011

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

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

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

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

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

Вы можете попробовать это здесь .

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

<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;
    });
});

Вы можете попробовать эту версию здесь .

1 голос
/ 31 марта 2011

Обновление: после того, как Ant опубликовал общедоступный URL-адрес страницы, я могу с уверенностью повторить свое утверждение о том, что в примере кода, размещенного Ant в его первоначальном вопросе, нет проблем, поэтому спасибо всем, кто проголосовал за меня.Проблема в том, что страница Ant использует библиотеки как prototype, так и 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/

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

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

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

в тег HEAD

и остальную часть JavaScript.код после закрывающего тега 

 </HTML>

0 голосов
/ 31 марта 2011

Я привел небольшой простой пример того, как это сделать ( 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;    
}
...