содержание аккордеона не отображается - JQuery

Question

содержание аккордеона не отображается - JQuery

0

Я пытаюсь переключить контент, стиль аккордеона, нажав на заголовок. Вот мой пример. Когда я запускаю Firebug, функция.click вызывается, но контент аккордеона не переключается. Я попробовал несколько комбинаций селекторов, но не успел.

Любые предложения приветствуются.

благодаря

 <style type="text/css">

.content { display: none;}

</style>
<div class="accordion complete" id="step_1">
  <div class="accordion-tab">Step 1.</div>
    <span>
      <div class="content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque blandit aliquam malesuada. 

        </p>
    </div>
   </span>
</div>

<script type="text/javascript">

    $(document).ready(function() {

        $(".accordion-tab").click(function(e) {

            e.preventDefault();
            $(this).closest('span').find('.content').not(':animated').slideToggle();


        });

    });
</script>

Slinky 24 сен. 2013, в 03:27

Источник

Теги:

jquery

accordion

2 ответа

0

Я думаю, вы можете выйти из этого "ближайшего" ("span"), поскольку он ищет своих предков, а не детей: JQuery # ближайший

поэтому ваш запрос должен быть:

$(this).find('.content').not(':animated').slideToggle();

И как подсказка, всегда проверяйте в своей любимой консоли браузера последовательность выбора jquery, ее очень легко потерять.

rfaga 23 сен. 2013, в 22:42

Ещё вопросы

Tushar Gupta · Accepted Answer · 2013-09-23T23-46-00.000Z

Вам нужно .next() not .closest()

ближайший → Описание: для каждого элемента в наборе получите первый элемент, который соответствует селектору, путем тестирования самого элемента и прохождения его предков в дереве DOM.

ближайший соответствует текущему элементу или предкам в DOM.

next → Описание: Получить сразу следующий родственный элемент каждого элемента в наборе согласованных элементов. Если предусмотрен селектор, он получает следующий брат, только если он соответствует этому селектору.

DEMO

$(document).ready(function () {
    $(".accordion-tab").click(function (e) {
        e.preventDefault();
        $(this).next('span').find('.content').not(':animated').slideToggle();
    });
});