Jquery несколько 'avalanched' проверяет необходимые для разрушилась/экспандер

Question

CSS:

#container_im.collapsed{ 
    background-color:red; 
    height: 48px; 
    margin-bottom: 10px; 
    margin-right: 10px; 
    width: 227px; 
} 

#container_im.expanded{ 
    background-color:green; 
    height: 348px; 
    margin-bottom: 10px; 
    margin-right: 10px; 
    width: 227px; 
} 

#expanded_content{ 
    height:100px; 
    color: yellow; 
    display: none; 
} 

//default state 
//expand box 
#nav.closed { 
    height:20px; 
    width:20px; 
    background-color: black; 
    color:white; 
} 

#nav.opened { 
    height:20px; 
    width:20px; 
    background-color: white; 
    color:black; 
} 

HTML:

<div id="container_im" class="collapsed" > 


    <div id="nav" class="closed">0</div> 
    box 1 - click me  

    <div id="expanded_content"> 
     extra content only for collapsed state 
    </div> 

</div> 

ЯШ:

<div id="nav" class="closed">0</div> 
    box 2 - click me  

    <div id="expanded_content"> 
     extra content only for collapsed state 
    </div> 

</div> 




***// 
$(document).bind("click", function(e) { 
    $(e.target).closest("#container_im").toggleClass("expanded"); 
    $(e.target).closest("#expanded_content").show(); 
    $(e.target).closest("#nav").toggleClass("closed"); 
});*** 

http://jsfiddle.net/NsBWy/14/

Любой гуру JS, который может помочь мне исправить этот код jquery?

• Попытка отображения текста #expanded_content для отображения только при нажатии на выбранное поле. И скрыть полный #expanded_content DIV и всех его детей на другой клик (тумблер)
• Попытка Преобрази #nav DIV и только один в данный момент щелкнул

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

Answer 1

У вас много чего не так в вашем подходе. Посмотрите на этот рабочий jsFiddle, а затем я рецензия некоторые из вещей, которые вы должны были неправильно:

http://jsfiddle.net/jfriend00/A9rKm/

$("#box").delegate(".container", "click", function(e) { 
    $(this).toggleClass("expanded collapsed"); 
}); 

То, что вы были неправильно:

1. Вы можете иметь только один объект с заданным идентификатором, поэтому вы должны использовать имена классов, а не идентификаторы для общих элементов.
2. Вы можете использовать this, чтобы получить доступ к объекту, нажав на него.
3. Вы не хотите размещать обработчики событий в документе, если можете избежать этого. Я создал общий родительский элемент, на который вы можете поместить обработчик событий, а затем использовать .delegate() из версии jQuery, которую вы выбрали (1.5), чтобы автоматически фильтровать их для меня. С jQuery 1.7+ вы должны использовать .on() вместо .delegate().
4. Вы можете использовать несколько классов с .toggleClass() для одновременного переключения нескольких классов.
5. .closest() ищет родительскую цепочку, а не где-либо еще. Вы используете .find(), если вы ищете детей определенного типа.
6. Вам не нужно использовать так много отдельных классов, которые указывают состояние открытия/закрытия. Один класс из общего родителя может использоваться CSS для всех детей. Таким образом, я смог устранить все другие изменения класса.
7. Комментарии к CSS должны быть в форме /* comment here */. Вы не можете использовать // для комментариев CSS.