最容易学习的CSS框架

目前主流web前端框架比较

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)