如何将bootstrap中的dropdown代码转换为hoverable？

在Bootstrap中，dropdown组件默认是通过点击触发下拉菜单的显示和隐藏。如果想要将dropdown代码转换为hoverable，即通过鼠标悬停触发下拉菜单的显示和隐藏，可以按照以下步骤进行操作：

 ```javascript

 $(document).ready(function() {

   $('.hoverable-dropdown').hover(function() {

     $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);

   }, function() {

     $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);

});

});

```

 ```javascript

 document.addEventListener('DOMContentLoaded', function() {

   var hoverableDropdowns = document.querySelectorAll('.hoverable-dropdown');

   hoverableDropdowns.forEach(function(dropdown) {

     dropdown.addEventListener('mouseenter', function() {

       this.querySelector('.dropdown-menu').classList.add('show');

});

     dropdown.addEventListener('mouseleave', function() {

       this.querySelector('.dropdown-menu').classList.remove('show');

});

});

});

```

这样，你就成功将Bootstrap中的dropdown代码转换为hoverable了。

关于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体的云计算品牌商，建议你参考腾讯云的官方文档和产品介绍页面，查找与云计算相关的产品和服务。

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云