jQuery+CSS实现动态问答效果

2010-11-7 - diyidu - css应用 - Views

截图预览

CSS代码

* {margin: 0; padding: 0;}
html {overflow-y: scroll;}
body {font: 18px Georgia, serif;}
#page-wrap {width: 500px; margin: 20px auto;}
dl {clear: both; margin: 0 0 60px 0;}
dt {border: 8px solid #7ac0d0; padding: 10px; background: white; position: relative; font-style: italic; position: relative; display: block; width: 100%; height: auto;}
dd.answer {background: white; position: relative; width: 70%; float: right;}
dd.answer div {padding: 10px; border-left: 8px solid #dedede; border-right: 8px solid #dedede; border-bottom: 8px solid #dedede; margin: 0 0 10px 0;}
.answer-tab {background: url("images/answer-tag.png"); display: block; text-indent: -9999px; width: 105px; height: 50px; cursor: pointer; position: absolute; bottom: -58px; left: 10px;}

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery+CSS实现的动态问答效果 - 低一度</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.2.6");</script>
<script type="text/javascript" src="js/faq.js"></script>
</head>
<body>
<div id="page-wrap">
<dl class="faq">
<dt>低一度博客的网址是哪个？</dt>
<dd class="answer">
<div><a href="http://www.diyidu.cn">www.diyidu.cn</a></div>
</dd>
</dl>
<dl class="faq">
<dt>怎样购买低一度博客的广告位？</dt>
<dd class="answer">
<div><a href="http://www.diyidu.cn/ads.html">点击这儿查看相关信息</a></div>
</dd>
</dl>
<dl class="faq">
<dt>低一度承接哪些博客程序的主题定制？</dt>
<dd class="answer">
<div>ZB、BO、WP、PJ</div>
</dd>
</dl>
</div>
</body>
</html>

faq.js文件代码

$(function(){

$("dd.answer")
  .hide();

$("dl.faq dt")
  .append("<br /><a href='#' title='Answer' class='answer-tab'>Answer</a>");

$(".answer-tab")
  .click(function(){
   $(this)
    .parent().parent()
    .find("dd.answer")
    .slideToggle();
            return false;
  });
});

在线演示

打包下载

关键词 // jQuery css实例 css应用 css
出处：低一度，链接：http://www.diyidu.cn/post/jQuery_wenda.html

上一篇：Z-blog深蓝色调主题“sl_dyd”发布下一篇：黄小琥：《没那么简单》