在活动的Bootstrap 4下拉列表中旋转箭头图标,可以通过以下步骤实现:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
下拉列表 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">选项1</a></li>
<li><a href="#">选项2</a></li>
<li><a href="#">选项3</a></li>
</ul>
</div>
.dropdown .caret {
transition: transform 0.3s ease;
}
.dropdown.show .caret {
transform: rotate(180deg);
}
这些样式将为箭头图标添加过渡效果,并在下拉列表展开时旋转180度。
$('.dropdown-toggle').click(function() {
$(this).find('.caret').toggleClass('rotate');
});
这段代码将在下拉列表按钮被点击时,切换箭头图标的旋转类名。
现在,当你点击下拉列表按钮时,箭头图标将会旋转180度。你可以根据需要自定义样式和动画效果。
推荐的腾讯云相关产品:腾讯云云服务器(CVM) 腾讯云云服务器(CVM)是一种可随时扩展的云计算服务,提供高性能、可靠稳定的云服务器,适用于各类应用场景。您可以根据实际需求选择不同配置的云服务器,并根据业务需求灵活调整配置。腾讯云云服务器支持多种操作系统,提供丰富的网络和存储选项,以及强大的安全防护能力。
了解更多腾讯云云服务器(CVM)的信息,请访问:腾讯云云服务器(CVM)产品介绍
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云