我有这个Li
标记,显示我的bootstrap主题中的通知下拉列表,但问题是如果此li
标记内没有内容,那么它的高度显示为300px
,我试过去除那个高度,但仍然没有运气。如果其中没有内容,我该如何调整此li
标记的大小。
内容显示在media-body标记
中<li class="dropdown navbar-notification">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell"></i>
</a>
<div class="dropdown-menu">
<div class="dropdown-header">
<span class="title">Notifications
<strong>(0)</strong>
</span>
</div>
<div class="dropdown-body niceScroll">
<div class="media-list small">
<a href="" class="media">
<div class="media-object pull-left"><i class="fa fa-ban fg-danger"></i>
</div>
<div class="media-body">
<span class="media-text">No new Notification</span>
<!-- Start meta icon -->
<span class="media-meta"></span>
<!--/ End meta icon -->
</div>
<!-- /.media-body -->
</a>
</div>
</div>
<div class="dropdown-footer">
<a href="https://www.example.com/notification">See All</a>
</div>
</div>
</li>
$(".navbar-notification .niceScroll").mouseover(function() {
$(".navbar-notification .niceScroll").niceScroll({
cursorwidth: '10px',
cursorborder: '0px'
}).resize();
});
答案 0 :(得分:0)
您可以通过css :empty
选择器选择空元素并隐藏它:
element:empty {
display: none;
}