bulma下拉组件(Dropdown)配套生效的js文件
bulma css框架默认没有带相关的js文件,所以直接使用的话无法实现 bulma下拉组件(Dropdown)在悬停模式下是可以正常使用的,但在点击状态下无效,俺老刘为此写了一个配套js文件,因为是基于jquery,所以需要先引入jquery
https://545c.com/f/930370-489760568-d9adb2 (访问密码:3153)
<div class="dropdown"> <div class="dropdown-trigger"> <button class="button" aria-haspopup="true" aria-controls="dropdown-menu3"> <span>点击显示选项</span> <span class="icon is-small"> <i class="fas fa-angle-down" aria-hidden="true"></i> </span> </button> </div> <div class="dropdown-menu" id="dropdown-menu3" role="menu"> <div class="dropdown-content"> <a href="#" class="dropdown-item"> Overview </a> <a href="#" class="dropdown-item"> Modifiers </a> <a href="#" class="dropdown-item"> Grid </a> <a href="#" class="dropdown-item"> Form </a> <a href="#" class="dropdown-item"> Elements </a> <a href="#" class="dropdown-item"> Components </a> <a href="#" class="dropdown-item"> Layout </a> <hr class="dropdown-divider"> <a href="#" class="dropdown-item"> More </a> </div> </div> </div> <script src="/static/js/jquery-3.5.1.min.js"></script> <script>$(document).ready(function(){ $(".dropdown .button").click(function (){ var dropdown = $(this).parents('.dropdown'); dropdown.toggleClass('is-active'); dropdown.focusout(function() { $(this).removeClass('is-active'); }); }); }); </script>
js文件可以放在任何位置,完整演示文件下载
https://545c.com/f/930370-489908582-27b257 (访问密码:3153)