css - 没有数据时删除下拉内容

Question

我在一个显示通知的铃铛图标下有一个下拉菜单，但是当没有可用数据时，它会在点击时显示:

我的火腿:

%nav.navbar.navbar-default
        .container
            .navbar-brand= link_to "wat", root_path
            - if user_signed_in?
                %ul.nav.navbar-nav.navbar-right
                    %li.nav-item.btn-group{"data-behavior"=>"notifications"}
                        %a#dropdownMenu1.dropdown-toggle.nav-link{"aria-expanded" => "false", "aria-haspopup" => "true", "data-behavior" => "notifications-link", "data-toggle" => "dropdown", :type => "button"}
                            = fa_icon "bell"

                            %span.notifs{"data-behavior" => "unread-count"} 
                        .dropdown-menu{"aria-labelledby" => "dropdownMenu1", "data-behavior" => "notification-items"}

如何去掉小矩形？

Answer 1

在添加.dropdown-menu div之前检查是否有数据

- if hasData?
  .dropdown-menu{"aria-labelledby" => "dropdownMenu1", "data-behavior" => "notification-items"}