移动导航栏的javascript事件

Question

我有一个针对移动设备的网站使用 Bootstrap 功能(左侧栏)，单击按钮时会弹出该功能(见下图)。我不太了解 Bootstrap ，但我想将一个 javascript 事件链接到可见的左侧边栏。如何在 javascript 中检查此栏是否可见？我想使用 change() 函数，但我不知道 bootstrap js 实际使用什么来显示菜单栏...按钮的 html 是

<div class="navbar navbar-inverse navbar-fixed-top" style="padding-left:6px;">
    <button type="button" class="navbar-toggle pull-left" data-toggle="offcanvas" data-recalc="true" data-target=".navmenu" data-canvas=".canvas">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
</div>

左侧边栏的 html 是

<div class="navmenu navmenu-inverse navmenu-fixed-left" id="mobile_navbar">
    <a class="navmenu-brand" href="/">Benty-fields</a>
    <ul class="nav navmenu-nav">
    content
</div>

Answer 1

您可以使用 jQuery 来检测何时有人单击按钮。只需向按钮添加一个 ID，然后:

$("#buttonId").click(function(e) {
    // your javascript event
});

或者，如果您想随时检查菜单是否可见，您可以在 javascript 事件中设置一个变量 (bool) 并在需要时检查该值。

这是另一种方法:

var isVisible = $("#myDiv").is( ":visible" ); 
var isHidden = $("#myDiv").is( ":hidden" );