Jquery несколько «лавинных» проверок, необходимых для свернутого / расширителя - PullRequest
Новая
       7

Jquery несколько «лавинных» проверок, необходимых для свернутого / расширителя

0 голосов
/ 17 января 2012

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 для отображения, только когда выбрано выбранное поле. И скрыть полный div #expanded_content и всех его дочерних элементов одним щелчком (переключить)
  • Попытка изменить стиль #nav div, и только тот, который в данный момент нажал

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

1 Ответ

1 голос
/ 17 января 2012

В вашем подходе много неправильного. Посмотрите на этот работающий 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.
...