创建折叠框式菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{margin:0px auto;font-family:"trebuchet MS",Arial;font-size:14px;width:900px;}
.header{background-color:#FA6766;color:#fff;height:100px;text-align:center;}
.accordion{border:1px solid #FA6766;width:300px;}
.accordion > h1{cursor:pointer;font-size:14px;font-weight: bold;text-align:center;}
.active{color:#ff0000;}
.container{background-color:#F0F8FF;padding:5px;text-align:left;width:288px;}
p,div{padding:0pt;margin:0pt;}
#leftPanel{float:left;width:300px;}
#rightPanel{float:left;margin:0pt 0pt 0pt 10px;padding:0pt;text-align:justify;width:590px;}
</style>

</head>
<body>
<div id="main">
<div class="header">
     <h1>My Awesome page</h1>
</div>

<div class="content">
<div id="leftPanel">

<div class="accordion">
<h1>PHP</h1>
<div class="container">PHP is <a href="data.php?page=php">Read more</a></div>
</div>

<div class="accordion">
<h1>PHP</h1>
<div class="container">PHP is <a href="data.php?page=jQuery">Read more</a></div>
</div>

<div class="accordion">
<h1>PHP</h1>
<div class="container">PHP is <a href="data.php?page=ajax">Read more</a></div>
</div>

<div class="accordion">
<h1>PHP</h1>
<div class="container">PHP is <a href="data.php?page=json">Read more</a></div>
</div>

</div>

<div id="rightPanel">
<h2>select a term</h2></div>
</div>
</div>
<script type="text/javascript" src="../jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
     $('.container').hide();
     $('.accordion > h1').click(function(){
          $('h1.active').removeClass('active');
          $(".container:visible").slideUp('fast');
          $(this).addClass('active').next('div').slideToggle('fast');

     });

     $('.container > a').click(getData);
     function getData()
     {
          var url=($(this).attr('href'));
          $.get(url,{},function(data){
               $('#rightPanel').html(data);
          });
          return false;
     }

});

</script>
</body>
</html>

不要忘记从getData函数返回false,否则页面将导航到ReadMore链接

data.php

<?php
$page=$_GET['page'];
switch ($page){
     case 'php':
          echo '';break;
     case 'jQuery':
          echo '';break;
     case 'ajax':
          echo 'ajax';break;
     case 'json':
          echo 'json'
          ;break;

}

posted @ 2014-03-31 18:02 wint Views(112) Comments(0) 收藏举报

刷新页面返回顶部

wint

创建折叠框式菜单

公告