Question

我使用bootstrap并希望在页面中放入子菜单。但是，无法让jquery识别按钮单击。

<div  class="navbar navbar-default visible-xs" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button id="sideMenuBtn" type="button" class="navbar-toggle " data-toggle="offcanvas" data-                                                       target=".sidebar-nav">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand visible-xs" href="#">Project Name</a>
        </div>
    </div>
</div>
<div class="row row-offcanvas row-offcanvas-left">
    <!-- sidebar -->
    <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation" >
        <hr />
        <ul class="nav">
            <li><a href="#">test 1</a></li>
            <li><a href="#">test 2</a></li>
            <li><a href="#">test 3</a></li>
            <li><a href="#">test 2</a></li>
        </ul>
    </div>
</div>

jquery是：

$(document).ready(function () {
  $('[data-toggle=offcanvas]').click(function () {
     $('.row-offcanvas').toggleClass('active');
  });
});

如果我将代码的第一行更改为<div class="navbar navbar-default navbar-fixed-top" role="navigation">，则可以正常工作。但我不希望它固定在最顶层。

有人可以解释一下我做错了吗

Answer 1

找到答案。感谢所有评论的人。答案很简单。我只是将第一行代码改为<div class="navbar navbar-default visible-xs" role="navigation" style="z-index:1000">显然有些东西覆盖了按钮。当我提高z-index时，问题就消失了。

Jquery按钮单击无法正常工作

1 个答案: