jquery panel

最新推荐文章于 2023-09-24 18:25:41 发布

原创最新推荐文章于 2023-09-24 18:25:41 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #class #div #function #xhtml #html

jQuery 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的滑动展开效果示例，该效果允许用户点击标题行来展开或收起详细内容。示例中包含了针对特定行业的DM广告描述，展示了如何通过简单的点击操作控制内容的显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如下代码，复制过去直接用就可以啦：

<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".flip").click(function(){

       $(this).next().slideToggle("slow");

});
});

</script>
<style type="text/css">
div.panel,div.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>

<body>
<div class="p">
   <div class="flip">第一行</div>
   <div class="panel">
      DM夹报广告是通过各大报社的发行渠道有计划、有目的地将企业信息传播给指定范围内广告对象（如家庭、个人和公司）的广告传播形式。比如：客户可以选择王府井，中关村等站点区域，保证发行的有效性，合理地控制了成本。
   适合行业：房产、汽车、金融（理财）、商超、餐饮（酒店）、娱乐（健身）、休闲（洗浴）、演出票务、食品饮料、教育培训、婚纱摄影、网站购物、通讯电子、办公用品……等行业。
   </div>
</div>
<div class="p">
<div class="flip">第二行</div>
   <div class="panel">
       1.针对性强：
    广告企业可自由选择具有针对性的区域或消费体群进行投递，避免无效发行给企业带来资源和资金的浪费。
   2.可控性强：
    夹报广告的传播对象可由企业自由选定和控制。广告企业可以根据企业的不同营销阶段,目标，对广告的内容,投放时间,区域，以及广告的预算进行控制，有的放矢，最大限度的发挥广告的效果。
   </div>
</div>
<div class="p">

<div class="flip">第三行</div>
   <div class="panel">
      宣传单页的大小和设计形式，发布的时间、地区、对象、数量，都可以根据商品的不同、销售意图、销售地区习惯的不同，而随时变更，这是区别于其它媒介的独特优势。
   4.宣传品（单页）的优势：
   宣传品不受规格大小和印刷尺寸限制，具有信息量大的特点。形式上，设计精美、新颖，给人耳目一新的感觉，视觉冲击力极强，让夹报广告不会淹没在泛泛众多广告中，使广告效果尽得溢彰。留存上，易保留，存放方便，存放率高，增强了广告效果的持效性。
   </div>
</div>

</body>
</html>