求修改一个JQUERY折叠菜单

我想要，点击每一个NAV菜单时，滑动显示分菜单的内容，点击下面的close按钮后再折叠关闭该菜单内容。
我的JQUERY部分代码没有作用，求正确的修改。谢谢。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function(){
  $("div#nav ul li a").click(function() {
      $(this).parent().find("div.menu").slideDown('fast').show(); 
  });
  $("div.close").click(function() {
  $(this).parent().find("div.menu").slideUp('fast').hide();   
  });
});
</script>
<style type="text/css">
*{padding:0;margin:0;}
li{float:left;list-style:none;padding-left:50px;}
.menu{position:absolute;top:20px;width:100px;display:none;z-index:10;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="">home</a>
<div class="menu">chinese<br/>english<p class="close">close</p></div>
</li>
<li><a href="">where are we</a>
<div class="menu">address<br/>contract<p class="close">close</p></div>
</li>
</ul>
</div>
</body>
</html>

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <script>
        jQuery(document).ready(function(){
          $("div#nav ul li a").click(function() {
              $(this).parent().find("div.menu").slideDown('fast').show(); 
          });
          $("p.close").click(function() {
              $(this).parent().slideUp('fast').hide();                  
          });
        });
    </script>
    <style type="text/css">
    *{padding:0;margin:0;}
    li{float:left;list-style:none;padding-left:50px;}
    .menu{position:absolute;top:20px;width:100px;display:none;z-index:10;}
    </style>
    </head>
    <body>
    <div id="nav">
    <ul>
    <li><a href="#">home</a>
        <div class="menu">chinese<br/>english<p class="close">close</p></div>
    </li>
    <li><a href="#">where are we</a>
        <div class="menu">address<br/>contract<p class="close">close</p></div>
    </li>
    </ul>
    </div>
    </body>
    </html>
      

  2.   


    <!--测试完成！-->
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!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 runat="server">
        <title>无标题页</title>
        <style type="text/css">
            *
            {
                padding: 0;
                margin: 0;
            }
            li
            {
                float: left;
                list-style: none;
                padding-left: 50px;
            }
            .menu
            {
                position: absolute;
                top: 20px;
                width: 100px;
                display: none;
                z-index: 10;
            }
        </style>
        <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
        <script>
        jQuery(document).ready(function(){
          $("#nav ul li a").click(function() {
              $(this).parent().find("div.menu").slideDown('fast').show(); 
          });
          $(".close").click(function() {
              $(this).parent().slideUp('fast').hide();                  
          });
        });
    </script>
    </head>
    <body>
        <div id="nav">
            <ul>
                <li><a href="javascript:void(0)">home</a>
                    <div class="menu">
                        chinese<br />
                        english<p class="close">
                            close1</p>
                    </div>
                </li>
                <li><a href="javascript:void(0)">where are we</a>
                    <div class="menu">
                        address<br />
                        contract<p class="close">
                            close2</p>
                    </div>
                </li>
            </ul>
        </div>
    </body>
    </html>
      

  3.   

    close的时候直接hide()就行
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <script>
        jQuery(document).ready(function(){
          $("div#nav ul li a").click(function() {
              $(this).parent().find("div.menu").slideDown('fast').show(); 
          });
    $('.close').click(function(){
    $(this).parent().hide(); 
    });
        });
    </script>
    <style type="text/css">
    *{padding:0;margin:0;}
    li{float:left;list-style:none;padding-left:50px;}
    .menu{position:absolute;top:20px;width:100px;display:none;z-index:10;}
    </style>
    </head>
    <body>
    <div id="nav">
    <ul>
    <li><a>home</a>
        <div class="menu">chinese<br/>english<p class="close">close</p></div>
    </li>
    <li><a>where are we</a>
        <div class="menu">address<br/>contract<p class="close">close</p></div>
    </li>
    </ul>
    </div>
    </body>
    </html>
      

  4.   

    感谢楼上几位，现在可以slideUp了。但是能不能再加一行代码？
    就是如果HOME菜单已经打开，再点击WHERE ARE WE时，HOME菜单将自动折叠关闭。
    再次感谢。
      

  5.   

    我把代码改成这个样子，没有效果……
    jQuery(document).ready(function(){
          $("div#nav ul li a").click(function() {
              $(this).parent().find("div.menu").slideDown('fast').show();
              $(this).parent().parent().find("li>div.menu").next().slideDown('fast').show();
          });
      

  6.   

    写错了，不过一样没作用……
    jQuery(document).ready(function(){
          $("div#nav ul li a").click(function() {
              $(this).parent().find("div.menu").slideDown('fast').show();
              $(this).parent().parent().find("li>div.menu").next().slideUp('fast').hide();
          });
      

  7.   

    $("#nav ul li a").toggle(function() {
              $(this).parent().find("div.menu").slideDown('fast').show(); 
          },function(){
              $(this).parent().find("div.menu").slideDown('fast').hide(); });
      

  8.   

    $("#nav ul li a").toggle(function() {
      $(this).parent().find("div.menu").slideDown('fast');  
      },function(){
      $(this).parent().find("div.menu").slideUp('fast');  });
      

  9.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <script>
        jQuery(document).ready(function(){
          $("div#nav ul li a").click(function() {
              $(this).parent().find("div.menu").slideDown('fast').show(); 
          });
          $("p.close").click(function() {
              $(this).parent().slideUp('fast').hide();                  
          });
        });
    </script>
    <style type="text/css">
    *{padding:0;margin:0;}
    li{float:left;list-style:none;padding-left:50px;}
    .menu{position:absolute;top:20px;width:100px;display:none;z-index:10;}
    </style>
    </head>
    <body>
    <div id="nav">
    <ul>
    <li><a href="####" target="_self">home</a>
        <div class="menu">chinese<br/>english<p class="close">close</p></div>
    </li>
    <li><a href="####" target="_self">where are we</a>
        <div class="menu">address<br/>contract<p class="close">close</p></div>
    </li>
    </ul>
    </div>
    </body>
    </html>
      

  10.   

    <script type="text/javascript">
    $(function (){
      $(".a").click(function (){
    $zi=$(this).siblings(".b");
    $(".b").each(function(i,domEle){domEle.style.display="none"});
    if($zi.is(":hidden")){
    $(this).css("background","#c60000").text("div" + this.id + "点击隐藏▲");
    $zi.show(1000);
    }else{
    $(this).css("background","#f3f3f3").text("div" + this.id + "点击显示▼");
    $zi.hide(1000);
    }
    })
    }) 
    </script>
      

  11.   

    楼上的效果和toggle差不多啊。
      

  12.   

    <script>
        jQuery(document).ready(function(){      $("div#nav ul li a").click(function() {
           $(".close").click();
              $(this).parent().find("div.menu").slideDown('fast').show();
          }); $(".close").click(function() {
      $(this).parent().slideUp('fast').hide();
      });
      });
    </script>