日期:2014-05-16  浏览次数:20399 次

关于向下滑动的问题

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          $(".btn").click(function(){
  $(this).next(".down").slideToggle();
  $(".btn1").css("display","block");
  })
          $(".btn1").click(function(){
  $(this).prev(".down").slideUp();
  $(".btn1").css("display","none");
  }) 
        });
    </script>
    <style type="text/css">
        * { 
            margin:0;
            padding:0; 
        }
        .div{
            float:left;
            width:200px;
        }
        .btn,.btn1{
            width:200px;
            height:25px;
            line-height:25px;
            float:left;
            background:#CCC;
            color:#FFF;
            text-align:center;
        }
.btn1{
display:none;
}
        .down{
            width:200px;
            height:2000px;
            background:#00bcf3;
            float:left;
            display:none;
        }
 
    </style>
</head>
<body>
    <div class="div">
        <a href="javascript:;" class="btn" delsong="1">点击</a>
        <div class="down"></div>
        <a href="javascript:;" class="btn1" delsong="1">点击</a>
    </div>