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 - 这表明我我只是没有正确地做到这一点。

我在那里放了一大堆控制台电话（在上面链接的示例页面中），试着看看发生了什么但却看不到它。

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

此致 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;

}

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

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

jQuery可折叠面板（我自己的）问题

4 个答案:

WORKING DEMO