jquery实现手风琴(横排)

HTML

<div id="box">
    <ul>
        <li><img src="images/1.jpg" alt=""></li>
        <li><img src="images/2.jpg" alt=""></li>
        <li><img src="images/3.jpg" alt=""></li>
        <li><img src="images/4.jpg" alt=""></li>
    </ul>
</div>

CSS

*{
    padding: 0;
    margin: 0;
}
ul li{
    list-style: none;
}
div{
    width: 1000px;
    border: 1px solid red;
    height: 350px;
    margin: 150px auto;
    overflow: hidden;
}
div ul li{
    float: left;
    width: 200px;
    height: 350px;
}

jquery

 <script src="jQuery/jquery-1.1
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个使用 jQuery 实现手风琴和箭头旋转的示例代码: HTML代码: ``` <div class="accordion"> <div class="accordion-header"> <h3>标题1</h3> <i class="arrow"></i> </div> <div class="accordion-body"> <p>内容1</p> </div> <div class="accordion-header"> <h3>标题2</h3> <i class="arrow"></i> </div> <div class="accordion-body"> <p>内容2</p> </div> <div class="accordion-header"> <h3>标题3</h3> <i class="arrow"></i> </div> <div class="accordion-body"> <p>内容3</p> </div> </div> ``` CSS代码: ``` .accordion { border: 1px solid #ddd; } .accordion-header { display: flex; align-items: center; justify-content: space-between; padding: 10px; cursor: pointer; background-color: #f7f7f7; } .accordion-header:hover { background-color: #e5e5e5; } .accordion-header h3 { margin: 0; } .accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } .accordion-body p { margin: 0; padding: 10px; } .arrow { width: 0; height: 0; border-style: solid; border-width: 5px 5px 0 5px; border-color: #999 transparent transparent transparent; transition: transform 0.3s ease-out; } .arrow.active { transform: rotate(180deg); } ``` jQuery代码: ``` $(document).ready(function() { $('.accordion-header').click(function() { $(this).toggleClass('active'); $(this).next('.accordion-body').slideToggle(); $(this).find('.arrow').toggleClass('active'); $('.accordion-header').not(this).removeClass('active'); $('.accordion-header').not(this).next('.accordion-body').slideUp(); $('.accordion-header').not(this).find('.arrow').removeClass('active'); }); }); ``` 这段代码实现了一个手风琴下拉菜单,并且点击标题时箭头会旋转。您可以根据需要进行修改和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值