JQuery XHTML дд дт дт

Question

Поскольку пользователь должен был дважды щелкнуть по одному и тому же dt, чтобы скрыть его дочерний элемент, как я могу сделать его таким, чтобы он скрывался при щелчке по любому другому dt. Заранее спасибо.

<script type="text/javascript">
$(document).ready(function () {
        $('#faq').find('dd').hide().end().find('dt').click(function () {
            $(this).next().slideToggle();
        });
    });
</script>

<dl id="faq">
    <dt>Question 1?</dt>
    <dd>
        Weee look at me I can type!!!
    </dd>

    <dt>Question 2?</dt>
    <dd>
        Weee look at me I can type too!!!
    </dd>
</dl>

Answer 1

Вот jsfiddle вашего кода.

Вы можете нажать на dt, чтобы переключить его "child" dd, но по звукам вы хотитескрыть все видимые dd с при нажатии на любой dt.

Вы можете сделать это, переключая все dt элементы, которые .not() рядом с текущим dd:

$('#faq').find('dd').hide().end().find('dt').click(function () {
  $('#faq').find('dd:visible').not($(this).next()).slideToggle();
  $(this).next().slideToggle();
});

Ознакомьтесь с обновленным jsfiddle .

Вы можете немного сжать код, объединив первую и вторую строки в обратном вызове click, каквидел здесь .

Answer 2

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

$(document).ready(function () {
    $('#faq').find('dd').hide().end().find('dt').click(function () {
        $(this).next().slideDown();
        $(this).siblings('dd').not($(this).next()).slideUp();
    });
});

• $(this).next().slideDown(); скользит вниз по следующему элементу, который является элементом dd, и скользит по нему вниз .
• $(this).siblings('dd').not($(this).next()).slideUp(); слайды вверх все остальные dd элементы (бит .not($(this).next())).

.siblings() - это то, что вы ищете, наряду с .not().

Демонстрация JSFiddle здесь .

Answer 3

$(function() {
$('#faq').find('dd:last-child').hide().end().find('dt').click(function () {
    $(this).next().slideDown();
    $(this).siblings('dd').not($(this).next()).slideUp();
});

Я только что добавил (последний: дочерний) класс псевдо, потому что мне нужно было отображать только один

спасибо, мой код вызвал у меня головную боль, ваш очень читабелен: -D