Jquery конкретный выбор ДИВ без использования Accordian

Question

HI,

Я пытаюсь получить гармошку как функциональность без использования функции аккордеона интерфейса JQuery в.

Как выбрать соответствующий (дочерний?) Div для открытия при использовании ссылки, присоединенной к элементу dt?

В настоящее время мой код

<div id="listings"> 
    <dl class="listings"> 
    <dt> 
     Get the Milk 
    </dt> 
    <dd> 
     Due Date: 17th Oct 
    </dd> 
    <dd> 
     <a href="#" class="more">more details 2</a> 
    </dd> 
    <dd> 
     <a href="#">mark as complete</a> 
    </dd> 
    </dl> 
    <div class="more_details"> 
    <p> 
     This is some details about the task that I would to have appear when 
     the more details 1 link is clicked 
    </p> 
    </div> 
    <dl class="listings"> 
    <dt> 
     Go to Work 
    </dt> 
    <dd> 
     Due Date: 22th Oct 
    </dd> 
    <dd> 
     Site: None 
    </dd> 
    <dd> 
     <a href="#" class="more">more details 2</a> 
    </dd> 
    <dd> 
     <a href="#">mark as complete</a> 
    </dd> 
    </dl> 
    <div class="more_details"> 
    <p> 
     This is some details about the task that I would to have appear when 
     the more details 2 link is clicked 
    </p> 
    </div> 
</div> 

JQuery Я использую это

$('.more').click(function() { 
    $('.more_details').slideToggle('fast', function() { }); 
    return false; 
}); 

Но проблемы у меня есть

1. Когда связь с нажатием клавиши больше, na turally всех more_details дива открытой

2. Количество элементов в списке будет меняться, поскольку они генерируются из запроса к базе данных, так что я наклоняю использовал фиксированный, уникальные имена классов

Благодарность

Jz

Answer 1

Основы: вам нужно перейти от this и найти элемент относительно с помощью tree traversal (перемещение по DOM с того места, где вы нажали). Самый простой способ выглядит следующим образом:

$('#listings .more').click(function(e) { 
    $(this).closest('.listings').next('.more_details').slideToggle('fast'); 
    e.preventDefault(); 
});​ 

You can test it out here. Это происходит из .more, который вы нажали на элемент .listings, используя .closest(), затем получите его .next() sibling (.more_details) и делает .slideToggle() (нет необходимости в обратном вызове, если вы ничего не делаете в нем).

---

Однако более эффективный способ сделать это, как только у вас есть больше, чем несколько элементов в списке, чтобы использовать .delegate() таким образом, есть только один click обработчик на #listings, как это:

$('#listings').delegate('.more', 'click', function(e) { 
    $(this).closest('.listings').next('.more_details').slideToggle('fast'); 
    e.preventDefault(); 
});​ 

You can test that version out here.

Answer 2

Использование JQuery-х next() и parent:

$(this).parents('.listings').next('.more_details').slideToggle('fast', function() { }); 

Это будет «вверх» в dom и найти элемент .listings (обратите внимание, что если у вас больше элементов .listings еще выше, добавьте .first() после него. Затем next ('. More_details') проверяет «sibblings», чтобы найти ту, которая содержит определение «.more_details».

Есть еще один вариант, если вы хотите изменить свой html. Оборудуйте как dl, так и div другим тегом, дайте ему имя класса, например «.listing_container». Затем вы можете сделать $ (this) .parents ('. Listing_container'). Find ('. More_details'). Это будет работать лучше, если у вас есть случаи, когда список не сопровождается его собственным элементом .more_details.