前端编程练习：手风琴

手风琴效果是前端常用的功能，效果类似于QQ联系人，点击一个分类标题显示他的内容，再点击其他分类标题，再显示响应的内容，同时其他的内容回收

HTML代码

css代码

• {
  margin:0;
  padding:0
  }
  .box {
  200px;
  margin:30px auto;
  cursor:pointer;
  user-select:none;
  }
  .nav {
  margin:1px 0px;
  }
  h3 {
  background:rgb(30,116,30);
  color:white;
  font-size:20px;
  height:40px;
  line-height:40px;
  padding-left:10px;
  }
  p {
  height:30px;
  line-height:30px;
  padding-left:20px;
  }
  p:hover {
  background:rgba(12,208,243,0.877);
  color:white;
  }
  .pp {
  display:none;
  }

js代码
$(".nav").each(function() {
$(this).click(function() {
// hide隐藏
$(".pp").hide();
//eq确定点击位置
// slideToggle 滑入滑出
$(".pp").eq($(this).index()).slideToggle();
})
})

这里的逻辑使用jq写的，所以别忘引入jquery库了

效果图：