Category: 编程、软件、技术

遵照由简到繁的原则，我继续完成“手风琴式的控制”，示例见此处。

在jQuery中实现手风琴式的控制十分简单：

<script src="../ui/ui.core.js"></script>
<script src="../ui/ui.accordion.js"></script>
<script type="text/javascript">
            $(document).ready(
            function()
            {
                $(#accordion).accordion();
            }
            );
</script>

两个额外的js文件可以从jQuery网站下载，也可以直接远程引用。 html的代码采用ul/li组合写成： “`lang=html

• Section 1Line 1.
  Line 1.
  Line 1.
  Line 1.

• Section 2Line 2.
  Line 2.
  Line 2.
  …

  
  
  实在是很简单，而且很干净，彻底分离了html和js代码。

是的，这个是示例6，而不是计划中的示例5（投票系统）。因为在jQuery中，进行可以伸展的面板的处理非常简单，只要一个toggle()函数就可以。 核心代码如下：

var i=0;
$(document).ready(
    function()
    {
        $(div).filter(#clickme).click(
            function()
            {
                i++;
                $(div).filter(#content).toggle();
                if(i%2==0)
                {
                    $(this).text(Click here to expand.);
                }
                else
                {
                    $(this).text(Click here to collapse.);
                }
            }
        );
    }
);

我用了一个变量i来判断要操作的div是处在显示还是隐藏状态，并相应的修改提示文字。通过查看jQuery的源代码，可以知道这也是jQuery中toggle使用的方法。

示例见此处。