简单折叠面板的制作(来源于CSS技术彻底研究)

本文链接：https://blog.youkuaiyun.com/myjlvzlp/article/details/8276208

本文将介绍如何利用CSS技术实现一个简单的折叠面板。通过分析according.html、according.js和according.css三个文件，理解其交互逻辑和样式设计，帮助读者掌握这一实用的前端技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

according.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>简单折叠面板的制作</title>
        <link href="pages/accord/css/accord.css" type="text/css" rel="stylesheet">
        <script src="pages/accord/js/according.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="CollapsiblePanel1" class="CollapsiblePanel">
            <div class="CollapsiblePanelTab STYLE1" tabindex="0">Learning CSS is Funny</div>
            <div class="CollapsiblePanelContent"><img src="cup.gif">
                An anchor tag can be used inside of a Collapsible Panel Tab so that the
                key board focus ring appears *inside* the tab instead of around the tab.
                This is an example of how to make the text within the anchor tag look
                like non-anchor (normal) text.This is an example of how to change the appearance of the panel tab that is
                currently open. The class "CollapsiblePanelOpen" is programatically added and removed
                from panels as the user clicks on the tabs within the CollapsiblePanel.
            </div>
        </div>
        <div id="CollapsiblePanel2" class="CollapsiblePanel">
            <div class="CollapsiblePanelTab" tabindex="0">Collapsible Panel is Funny</div>
            <div class="CollapsiblePanelContent"> 
                The name of the class (" Collapsible Panel Content") used in this selector is not necessary
                to make the widget function. You can use any class name you want to style a
                CollapsiblePanel content container.
            </div>
        </div>
        <div id="CollapsiblePanel3" class="CollapsiblePanel">
            <div class="CollapsiblePanelTab" tabindex="0">CSS is Great</div>
            <div class="CollapsiblePanelContent"> 
                The name of the class (" Collapsible Panel Content") used in this selector is not necessary
                to make the widget function. You can use any class name you want to style a
                CollapsiblePanel content container.
            </div>
        </div>
        <script type="text/javascript">
            var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1",{contentIsOpen:false});
            var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2",{contentIsOpen:false});
            var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3",{contentIsOpen:false});
        </script>
    </body>
</html>

according.js

var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};

Spry.Widget.CollapsiblePanel = function(element, opts)
{
    this.init(element);

    Spry.Widget.CollapsiblePanel.setOptions(this, opts);

    this.attachBehaviors();
};

Spry.Widget.CollapsiblePanel.prototype.init = function(element)
{
    this.element = this.getElement(element);
    this.focusElement = null;
    this.hoverClass = "CollapsiblePanelTabHover";
    this.openClass = "CollapsiblePanelOpen";
    this.closedClass = "CollapsiblePanelClosed";
    this.focusedClass = "CollapsiblePanelFocused";
    this.enableAnimation = true;
    this.enableKeyboardNavigation = true;
    this.animator = null;
    this.hasFocus = false;
    this.contentIsOpen = true;
};

Spry.Widget.CollapsiblePanel.prototype.getElement = function(ele)
{
    if (ele && typeof ele == "string")
        return document.getElementById(ele);
    return ele;
};

Spry.Widget.CollapsiblePanel.prototype.addClassName = function(ele, className)
{
    if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
        return;
    ele.className += (ele.className ? " " : "") + className;
};

Spry.Widget.CollapsiblePanel.prototype.removeClassName = function(ele, className)
{
    if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
        return;
    ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
};

Spry.Widget.CollapsiblePanel.prototype.hasClassName = function(ele, className)
{
    if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
        return false;
    return true;
};

Spry.Widget.CollapsiblePanel.prototype.setDisplay = function(ele, display)
{
    if( ele )
        ele.style.display = display;
};

Spry.Widget.CollapsiblePanel.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
{
    if (!optionsObj)
        return;
    for (var optionName in optionsObj)
    {
        if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
            continue;
        obj[optionName] = optionsObj[optionName];
    }
};

Spry.Widget.CollapsiblePanel.prototype.onTabMouseOver = function()
{
    this.addClassName(this.getTab(), this.hoverClass);
};

Spry.Widget.CollapsiblePanel.prototype.onTabMouseOut = function()
{
    this.removeClassName(this.getTab(), this.hoverClass);
};

Spry.Widget.CollapsiblePanel.prototype.open = function()
{
    this.contentIsOpen = true;
    if (this.enableAnimation)
    {
        if (this.animator)
            this.animator.stop();
        this.animator = new Spry.Widget.CollapsiblePanel.PanelAnimator(this, true);
        this.animator.start();
    }
    else
        this.setDisplay(this.getContent(), "block");

    this.removeClassName(this.element, this.closedClass);
    this.addClassName(this.element, this.openClass);
};

Spry.Widget.CollapsiblePanel.prototype.close = function()
{
    this.contentIsOpen = false;
    if (this.enableAnimation)
    {
        if (this.animator)
            this.animator.stop();
        this.animator = new Spry.Widget.CollapsiblePanel.PanelAnimator(this, false);
        this.animator.start();
    }
    else
        this.setDisplay(this.getContent(), "none");

    this.removeClassName(this.element, this.openClass);
    this.addClassName(this.element, this.closedClass);
};

Spry.Widget.CollapsiblePanel.prototype.onTabClick = function()
{
    if (this.isOpen())
        this.close();
    else
        this.open();
    this.focus();
};

Spry.Widget.CollapsiblePanel.prototype.onFocus = function(e)
{
    this.hasFocus = true;
    this.addClassName(this.element, this.focusedClass);
};

Spry.Widget.CollapsiblePanel.prototype.onBlur = function(e)
{
    this.hasFocus = false;
    this.removeClassName(this.element, this.focusedClass);
};

Spry.Widget.CollapsiblePanel.ENTER_KEY = 13;
Spry.Widget.CollapsiblePanel.SPACE_KEY = 32;

Spry.Widget.CollapsiblePanel.prototype.onKeyDown = function(e)
{
    var key = e.keyCode;
    if (!this.hasFocus || (key != Spry.Widget.CollapsiblePanel.ENTER_KEY && key != Spry.Widget.CollapsiblePanel.SPACE_KEY))
        return true;
	
    if (this.isOpen())
        this.close();
    else
        this.open();

    if (e.stopPropagation)
        e.stopPropagation();
    if (e.preventDefault)
        e.preventDefault();

    return false;
};

Spry.Widget.CollapsiblePanel.prototype.attachPanelHandlers = function()
{
    var tab = this.getTab();
    if (!tab)
        return;

    var self = this;
    Spry.Widget.CollapsiblePanel.addEventListener(tab, "click", function(e) {
        return self.onTabClick();
    }, false);
    Spry.Widget.CollapsiblePanel.addEventListener(tab, "mouseover", function(e) {
        return self.onTabMouseOver();
    }, false);
    Spry.Widget.CollapsiblePanel.addEventListener(tab, "mouseout", function(e) {
        return self.onTabMouseOut();
    }, false);

    if (this.enableKeyboardNavigation)
    {
        // XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
        // rely on adding the tabindex attribute if it is missing to enable keyboard navigation
        // by default.

        // Find the first element within the tab container that has a tabindex or the first
        // anchor tag.
		
        var tabIndexEle = null;
        var tabAnchorEle = null;

        this.preorderTraversal(tab, function(node) {
            if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
            {
                var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
                if (tabIndexAttr)
                {
                    tabIndexEle = node;
                    return true;
                }
                if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
                    tabAnchorEle = node;
            }
            return false;
        });

        if (tabIndexEle)
            this.focusElement = tabIndexEle;
        else if (tabAnchorEle)
            this.focusElement = tabAnchorEle;

        if (this.focusElement)
        {
            Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "focus", function(e) {
                return self.onFocus(e);
            }, false);
            Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "blur", function(e) {
                return self.onBlur(e);
            }, false);
            Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "keydown", function(e) {
                return self.onKeyDown(e);
            }, false);
        }
    }
};

Spry.Widget.CollapsiblePanel.addEventListener = function(element, eventType, handler, capture)
{
    try
    {
        if (element.addEventListener)
            element.addEventListener(eventType, handler, capture);
        else if (element.attachEvent)
            element.attachEvent("on" + eventType, handler);
    }
    catch (e) {}
};

Spry.Widget.CollapsiblePanel.prototype.preorderTraversal = function(root, func)
{
    var stopTraversal = false;
    if (root)
    {
        stopTraversal = func(root);
        if (root.hasChildNodes())
        {
            var child = root.firstChild;
            while (!stopTraversal && child)
            {
                stopTraversal = this.preorderTraversal(child, func);
                try {
                    child = child.nextSibling;
                } catch (e) {
                    child = null;
                }
            }
        }
    }
    return stopTraversal;
};

Spry.Widget.CollapsiblePanel.prototype.attachBehaviors = function()
{
    var panel = this.element;
    var tab = this.getTab();
    var content = this.getContent();

    if (this.contentIsOpen || this.hasClassName(panel, this.openClass))
    {
        this.removeClassName(panel, this.closedClass);
        this.setDisplay(content, "block");
        this.contentIsOpen = true;
    }
    else
    {
        this.removeClassName(panel, this.openClass);
        this.addClassName(panel, this.closedClass);
        this.setDisplay(content, "none");
        this.contentIsOpen = false;
    }

    this.attachPanelHandlers();
};

Spry.Widget.CollapsiblePanel.prototype.getTab = function()
{
    return this.getElementChildren(this.element)[0];
};

Spry.Widget.CollapsiblePanel.prototype.getContent = function()
{
    return this.getElementChildren(this.element)[1];
};

Spry.Widget.CollapsiblePanel.prototype.isOpen = function()
{
    return this.contentIsOpen;
};

Spry.Widget.CollapsiblePanel.prototype.getElementChildren = function(element)
{
    var children = [];
    var child = element.firstChild;
    while (child)
    {
        if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
            children.push(child);
        child = child.nextSibling;
    }
    return children;
};

Spry.Widget.CollapsiblePanel.prototype.focus = function()
{
    if (this.focusElement && this.focusElement.focus)
        this.focusElement.focus();
};

/////////////////////////////////////////////////////

Spry.Widget.CollapsiblePanel.PanelAnimator = function(panel, doOpen, opts)
{
    this.timer = null;
    this.interval = 0;
    this.stepCount = 0;

    this.fps = 0;
    this.steps = 10;
    this.duration = 500;
    this.onComplete = null;

    this.panel = panel;
    this.content = panel.getContent();
    this.panelData = [];
    this.doOpen = doOpen;

    Spry.Widget.CollapsiblePanel.setOptions(this, opts);


    // If caller specified speed in terms of frames per second,
    // convert them into steps.

    if (this.fps > 0)
    {
        this.interval = Math.floor(1000 / this.fps);
        this.steps = parseInt((this.duration + (this.interval - 1)) / this.interval);
    }
    else if (this.steps > 0)
        this.interval = this.duration / this.steps;

    var c = this.content;

    var curHeight = c.offsetHeight ? c.offsetHeight : 0;
	
    if (doOpen && c.style.display == "none")
        this.fromHeight = 0;
    else
        this.fromHeight = curHeight;

    if (!doOpen)
        this.toHeight = 0;
    else
    {
        if (c.style.display == "none")
        {
            // The content area is not displayed so in order to calculate the extent
            // of the content inside it, we have to set its display to block.

            c.style.visibility = "hidden";
            c.style.display = "block";
        }

        // Unfortunately in Mozilla/Firefox, fetching the offsetHeight seems to cause
        // the browser to synchronously re-layout and re-display content on the page,
        // so we see a brief flash of content that is *after* the panel being positioned
        // where it should when the panel is fully expanded. To get around this, we
        // temporarily position the content area of the panel absolutely off-screen.
        // This has the effect of taking the content out-of-flow, so nothing shifts around.

        // var oldPos = c.style.position;
        // var oldLeft = c.style.left;
        // c.style.position = "absolute";
        // c.style.left = "-2000em";

        // Clear the height property so we can calculate
        // the full height of the content we are going to show.
        c.style.height = "";
        this.toHeight = c.offsetHeight;

    // Now restore the position and offset to what it was!
    // c.style.position = oldPos;
    // c.style.left = oldLeft;
    }

    this.increment = (this.toHeight - this.fromHeight) / this.steps;
    this.overflow = c.style.overflow;

    c.style.height = this.fromHeight + "px";
    c.style.visibility = "visible";
    c.style.overflow = "hidden";
    c.style.display = "block";
};

Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.start = function()
{
    var self = this;
    this.timer = setTimeout(function() {
        self.stepAnimation();
    }, this.interval);
};

Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.stop = function()
{
    if (this.timer)
    {
        clearTimeout(this.timer);

        // If we're killing the timer, restore the overflow
        // properties on the panels we were animating!

        if (this.stepCount < this.steps)
            this.content.style.overflow = this.overflow;
    }

    this.timer = null;
};

Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.stepAnimation = function()
{
    ++this.stepCount;

    this.animate();

    if (this.stepCount < this.steps)
        this.start();
    else if (this.onComplete)
        this.onComplete();
};

Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.animate = function()
{
    if (this.stepCount >= this.steps)
    {
        if (!this.doOpen)
            this.content.style.display = "none";
        this.content.style.overflow = this.overflow;
        this.content.style.height = this.toHeight + "px";
    }
    else
    {
        this.fromHeight += this.increment;
        this.content.style.height = this.fromHeight + "px";
    }
};

according.css

.CollapsiblePanel{
    margin: 0px;
    padding: 0px;
    width: 300px;
}
.CollapsiblePanelTab{
    font: bold 1em arial;
    color: #630;
    background: url(../images/col-close-back.gif) no-repeat;
    height: 30px;
    line-height: 30px;
    margin: 0px;
    padding: 2px 30px;
    cursor: pointer;
    -moz-user-select:none;
    -khtml-user-select:none;
}
/*展开时候变换的图像*/
.CollapsiblePanelOpen .CollapsiblePanelTab{
    background: url(../images/col-open-back.gif) no-repeat;
}
.CollapsiblePanelTabHover{
    color: #fff;
    background: url(../images/col-close-hover.gif) no-repeat;
}
.CollapsiblePanelOpen .CollapsiblePanelTabHover{
    color: #fff;
    background: url(../images/col-open-hover.gif) no-repeat;
}

图片资源