JQuery складные панели (мои собственные) проблемы

Question

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

(Пример страницы на http://www.thekmz.co.uk/misc/cpanel/index1.html)

Как это работает (или, может быть, не так)

HTML

<div id="container">
    <div class="collapsiblePanel" title="Example Collapsible Panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit... etc</p>
    </div>
</div>

Javascript

(function($) {
    $.fn.extend({
        collapsiblePanel: function() {
        return $(this).each(initCollapsiblePanel);
    }
  });
})(jQuery);

function initCollapsiblePanel() {
    if ($(this).children().length == 0) {
        $(this).wrapInner("<div></div>");
    }    
    $(this).children().wrapAll("<div class='cpanelContent'></div>");
    $("<div class='cpanelTitle'><div>" + $(this).attr("title") + "</div><div class='cpanelToggle'>more</div></div>").prependTo($(this));
    $(".cpanelContent", this).hide();
    $(".cpanelTitle", this).click(toggleCollapsiblePanel);
}

function toggleCollapsiblePanel() {
    $(".cpanelContent", $(this).parent()).slideToggle();

    if ($(".cpanelContent", $(this).parent()).is(":hidden")) {
        $(".cpanelToggle", this).html('more');
    } else {
        $(".cpanelToggle", this).html('close');
    }
}

CSS

#container {
    width:300px;
    height:300px;
}

.collapsiblePanel {
    width:100%;
}

.cpanelTitle {
    position:relative;
    width:100%;
    cursor: pointer;
    cursor: hand;
}

.cpanelToggle {
    position:absolute;
    top:0px;
    right:0px;
    font-style:italic;
}

Таким образом, он принимает div с классом collapsiblePanel и создает различные вложенные div. В заголовке div содержится заголовок, а текст переключателя перемещается вправо, что будет «больше» или «закрыто» в зависимости от того, развернута ли панель содержимого или свернута.

Бит, который не работает, это

if ($(".cpanelContent", $(this).parent()).is(":hidden")) {

в функции toggleCollapsiblePanel (). DIV переключается нормально, так что кажется, что я выбираю содержимое div хорошо, но использую то же самое, чтобы выяснить, скрыто оно или нет (поэтому я могу изменить текст cPanelToggleDiv), всегда возвращается как ложное - что указывает на то, что Я просто делаю это неправильно.

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

Любая помощь, указывающая на мою безнадежность / растерянность, будет принята с благодарностью.

С уважением Nymor

Answer 1

Вы должны проверить состояние hidden в методе обратного вызова slideToggle. Если анимация слайдов не завершена, вы не можете сказать, скрыт она или нет. Попробуйте это

Здесь я также провел несколько других оптимизаций, например, использовал this, который будет указывать на элемент, который он скользит.

function toggleCollapsiblePanel() {
    $(".cpanelContent", $(this).parent()).slideToggle(function(){
    if ($(this).is(":hidden")) {
           $(this).html('more');
       } else {
           $(this).html('close');
       }
   });
}

Answer 2

Добавление

    var open = false; 

к вашей функции initCollapsiblePanel.

Затем обновление функции toggleCollapsiblePanel заменить:

    if ($(".cpanelContent", $(this).parent()).is(":hidden")) {... 

следующим:

if (!open) {
    $(".cpanelToggle", this).html('more');
    open  = true;
} else {
    $(".cpanelToggle", this).html('close');
    open = false;

}

Теперь это должно изменить текст и закрыть текст (я думаю, это то, что вам нужно).Si

Answer 3

РАБОЧИЙ ДЕМО

Код:

function toggleCollapsiblePanel() {
    var cCp = $(".cpanelContent", $(this).parent());
    var cT  = $(".cpanelToggle" , this);

    check = cCp.is(":hidden") ? cT.html('close') : cT.html('more') ;
    cCp.slideToggle();
}

Answer 4

Проблема в том, что ваш тест выполняется до того, как слайдогуг завершит работу.Это означает, что он либо станет видимым, либо исчезнет, ​​в любом случае он не будет скрыт.

Вы должны переместить ваш текст, переключаясь в функцию обратного вызова slideToggle, например:

function toggleCollapsiblePanel() {
    $(".cpanelContent", $(this).parent()).slideToggle(600, function() {
        if ($(this).is(":hidden")) {
            $(this).html('more');
        } else {
            $(this).html('close');
        }   
    });    
}