您的位置:首页 > 编程语言 > PHP开发

jq 使用php输出一问 一答的列表 点击某个相应问题展开相应回答

2016-07-29 11:30 253 查看
就是这种效果

就是这种效果

下面是代码

html:   建议复制到自己的编辑器去看吧

<volist name="res" id="res">
<li><div class="b_news_list"><img src="http://hy.exinl.com/public/static/goo/wyc/srwyc/news7.png" class="b_news7"><div class="b_news_list_right"><span class="b_ct"><b>{$res.title}</b><em>{$res.time}</em></span><img src="http://hy.exinl.com/public/static/goo/wyc/srwyc/news1.png" class="b_new1 flip" ></div>
<div class="b_news_con panel"  style="display: none; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(238, 238, 238);"><p style="color: #333;">亲爱的无忧家人:<br></p><p style="color: #333;">   {$res.content}</p></div></div></li>
</volist>


jq代码:注意类名别写错了

<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
var index=$(".flip").index(this);//获取点击元素序号
$(".panel").eq(index).slideToggle("slow");//显示相应的内容
});
});

</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jq thinkphp