Bootstrap 弹出窗口未显示
Bootstrap Popover is not displaying
大家好。小困境,但非常令人沮丧。
我正在尝试将我的导航栏菜单变成弹出窗口以节省屏幕空间。
这是我的导航栏html代码:
<ul class="nav navbar-nav navbar-right" style="background-color: black;margin-right:35px;">
<li>
<img class="nav-cart-btn" src="~/node_modules/bootstrap-icons/icons/cart-check.svg" style="" />
@Html.ActionLink("Cart", "Cart", "Stripe", new { @style = "display: inline-block;font-size:1.25em;font-weight:bold;" })
</li>
<!-- the old menu went here [just for my reference] -->
</ul>
<button id="dropdownMenuButton" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="margin-top:5px;margin-bottom:4px;">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"></path>
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"></path>
</svg>
<span style="position:relative;top:-5px;" data-toggle="popover" data-placement="bottom" data-content="Content">Profile</span>
</button>
<ul id="profile-menu-content" style="display:none;">
<li>@Html.ActionLink("Profile", "Index", "Manage", routeValues: new { area = "" }, htmlAttributes: new { @class = "dropdown-item" })</li>
<li>@Html.ActionLink("My Orders", "MyOrders", "Home", routeValues: new { area = "" }, htmlAttributes: new { @class = "dropdown-item" })</li>
<li>@Html.ActionLink("Liked Posts", "LikedPosts", "Home", routeValues: new { area = "" }, htmlAttributes: new { @class = "dropdown-item" })</li>
<li>@Html.ActionLink("Billing", "ManageBilling", "Home", routeValues: new { area = "" }, htmlAttributes: new { @class = "dropdown-item" })</li>
<li>
<a href="javascript:sessionStorage.removeItem('accessToken');$('#logoutForm').submit();">Log off</a>
</li>
</ul>
这是我的 Javascript 代码:
<script>
$('#dropdownMenuButton [data-toggle="popover"]').popover({
html: true,
content: function () {
return $('#profile-menu-content').html();
}
});
</script>
这是 UI 的精美视觉效果:
弹出窗口没有显示任何内容。打败我了。
我想要一个基本上看起来像这样的弹出窗口(蓝色)。当我将鼠标悬停在弹出窗口上时,它应该显示菜单的内容:
非常感谢任何建议。
根据docs,会显示content
:
if data-content attribute isn't present.
因此,解决方案应该是从 span[data-toggle="popover"]
中删除 data-content
并以不同的方式设置列表项的样式(目前它们是白色的,因为 .btn-danger
class在按钮上)。
(请注意,使用当前选择器,只有单击 <span>
才会触发菜单)
大家好。小困境,但非常令人沮丧。
我正在尝试将我的导航栏菜单变成弹出窗口以节省屏幕空间。
这是我的导航栏html代码:
<ul class="nav navbar-nav navbar-right" style="background-color: black;margin-right:35px;">
<li>
<img class="nav-cart-btn" src="~/node_modules/bootstrap-icons/icons/cart-check.svg" style="" />
@Html.ActionLink("Cart", "Cart", "Stripe", new { @style = "display: inline-block;font-size:1.25em;font-weight:bold;" })
</li>
<!-- the old menu went here [just for my reference] -->
</ul>
<button id="dropdownMenuButton" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="margin-top:5px;margin-bottom:4px;">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"></path>
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"></path>
</svg>
<span style="position:relative;top:-5px;" data-toggle="popover" data-placement="bottom" data-content="Content">Profile</span>
</button>
<ul id="profile-menu-content" style="display:none;">
<li>@Html.ActionLink("Profile", "Index", "Manage", routeValues: new { area = "" }, htmlAttributes: new { @class = "dropdown-item" })</li>
<li>@Html.ActionLink("My Orders", "MyOrders", "Home", routeValues: new { area = "" }, htmlAttributes: new { @class = "dropdown-item" })</li>
<li>@Html.ActionLink("Liked Posts", "LikedPosts", "Home", routeValues: new { area = "" }, htmlAttributes: new { @class = "dropdown-item" })</li>
<li>@Html.ActionLink("Billing", "ManageBilling", "Home", routeValues: new { area = "" }, htmlAttributes: new { @class = "dropdown-item" })</li>
<li>
<a href="javascript:sessionStorage.removeItem('accessToken');$('#logoutForm').submit();">Log off</a>
</li>
</ul>
这是我的 Javascript 代码:
<script>
$('#dropdownMenuButton [data-toggle="popover"]').popover({
html: true,
content: function () {
return $('#profile-menu-content').html();
}
});
</script>
这是 UI 的精美视觉效果:
弹出窗口没有显示任何内容。打败我了。
我想要一个基本上看起来像这样的弹出窗口(蓝色)。当我将鼠标悬停在弹出窗口上时,它应该显示菜单的内容:
非常感谢任何建议。
根据docs,会显示content
:
if data-content attribute isn't present.
因此,解决方案应该是从 span[data-toggle="popover"]
中删除 data-content
并以不同的方式设置列表项的样式(目前它们是白色的,因为 .btn-danger
class在按钮上)。
(请注意,使用当前选择器,只有单击 <span>
才会触发菜单)