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;
}

所以它需要一个带有 collapsiblePanel 类的 div 并创建各种嵌套的 div。标题 div 包含标题和一些向右浮动的切换文本，根据内容面板是展开还是折叠，这些文本将是“更多”或“关闭”。

不起作用的位是

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

在 toggleCollapsiblePanel() 函数中。 div 切换正常，所以看起来我选择了内容 div，但使用它来确定它是否被隐藏（所以我可以更改 cPanelToggleDiv 的文本）总是返回为 false - 这向我表明我只是做得不对。

我在那里（在上面链接的示例页面中）放了很多控制台调用，试图看看发生了什么，但就是看不到它。

任何指出我的绝望/困惑的帮助将不胜感激。

问候 尼莫

Answer 1

您应该在slideToggle 回调方法中检查hidden 状态。除非幻灯片动画完成，否则您不能说它是否隐藏。试试这个

在这里我也做了一些其他的优化，比如使用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函数replace：

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

以下内容：

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

}

这现在应该改变更多和关闭的文本。（我认为这是你的追求）。 硅

Answer 3

问题是您的测试在 slideToggle 完成运行之前正在运行。这意味着它要么刚刚变得可见，要么正在淡出，在任何一种情况下都不会被隐藏。

您应该将文本切换到 slideToggle 回调函数中，例如：

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

Answer 4

WORKING DEMO

代码：

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

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