Эффект аккордеона JavaScript не сработает, что-то связанное с псевдоклассом? - PullRequest
Новая
       11

Эффект аккордеона JavaScript не сработает, что-то связанное с псевдоклассом?

1 голос
/ 13 апреля 2010

Я попытался создать эффект аккордеона с помощью JavaScript на основе этого видео, изменив несколько вещей, таких как использование кнопки ввода вместо ссылки для селектора. Однако по какой-то причине это не работает. Ошибка консоли Firefox выводит unknown pseudo-class or pseudo-element "visible" каждый раз, когда я пытаюсь ее использовать. В чем проблема? 

$("div.example").hide();
$("input.exampleButton").click(function(){
    $("div.example:visible").slideUp("slow");
    $(this).parent().next().slideDown("slow");
    //return false; if you don't want the link to follow
});

Вот HTML 

input type="button" value="See An Example" class="exampleButton" />
<div class="example">
    ...content
</div>
input type="button" value="See An Example" class="exampleButton" />
<div class="example">
    ...content
</div>

1 Ответ

1 голос
/ 13 апреля 2010

Вы можете игнорировать предупреждение в консоли. Причина, по которой код не работает, состоит в том, что структура разметки не соответствует обходу, проделанному Javascript. Каждый <input>, вероятно, должен быть внутри <div>, так что вызов parent().next() будет корректно переходить от входа к <div class="example"> после него. Вам также не хватает открытия < на входах, но я предполагаю, что это ошибка копирования / вставки.

Рабочая разметка: 

<div>
    <input type="button" value="See An Example" class="exampleButton" />
</div>
<div class="example">
    ...content
</div>
<div>
    <input type="button" value="See An Example" class="exampleButton" />
</div>
<div class="example">
    ...content
</div>
...