如果实现标题超过5条就显示更多按钮，隐藏后面的标题？

<div class="nav">
<dl>
  <dd>数码相</dd>
  <dd>摄像机</dd>
  <dd>照片打印机</dd>
  <dd>单反镜头/附件</dd>
  <dd>数码相</dd>
  <p><a href="#">显示更多 >></a> </p>
  <dd>摄像机</dd>
  <dd>照片打印机</dd>
  <dd>单反镜头/附件</dd>
   <dd>摄像机</dd>
  <dd>照片打印机</dd>
  <dd>单反镜头/附件</dd> 
</dl>
</div>比如上面的Html代码，请问用jquery如何判断如果dd的条数超过5条就显示更多按钮，如果小于五条就隐藏更多按钮，点击更多按钮后隐藏更多按钮并显示全部的DD，鼠标离开dl区域隐藏多余的dd，只显示5个dd。可能我的思路复杂了，也可能是正确的，不过代码具体怎么写还在研究中，谁如果知道怎么写，发上来学习一下哈，多谢！

解决方案 »

  1.   

    $("dd").size()>5
    考这个判断 。
      

  2.   

    不知道是不是你要的效果<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>    <script src="lib/jquery-1.4.2.js" type="text/javascript"></script>    <script type="text/javascript">
            $(document).ready(function() {
                var dl = $(".nav dl");
                var dds = $(".nav dl dd");
                if (dds.length > 5) {
                    dl.find("dd:gt(4)").hide();
                }
                else {
                    dl.find("dt").hide();
                }            //点击更多
                $(".nav dl dt a").click(function() {
                    $(this).parent().hide();
                    dl.find("dd:gt(4)").show();
                });
            });
        </script></head>
    <body>
        <div class="nav">
            <dl>
                <dd>
                    数码相</dd>
                <dd>
                    摄像机</dd>
                <dd>
                    照片打印机</dd>
                <dd>
                    单反镜头/附件</dd>
                <dd>
                    数码相</dd>
                <dt><a href="#">显示更多 >></a> </dt>
                <dd>
                    摄像机</dd>
                <dd>
                    照片打印机</dd>
                <dd>
                    单反镜头/附件</dd>
                <dd>
                    摄像机</dd>
                <dd>
                    照片打印机</dd>
                <dd>
                    单反镜头/附件</dd>
            </dl>
        </div>
    </body>
    </html>