Question

我正在尝试使用Twitter Bootstrap's Collapse plugin将导航栏中的菜单（实际上是链接<a>）转换为可折叠菜单。

可折叠菜单功能正常，但问题是菜单链接是可点击的，即点击菜单时，而不是打开菜单，我将被带到链接页面。

截至目前，我正在使用onclick="return false;"来禁用菜单链接的默认行为（如下所示），即使其无法点击。

<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
    <div class="navbar-header"> <!-- [...] --> </div>

    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <!-- [...] -->

        <ul class="nav navbar-nav">
            <li>

                <!-- COLLAPSIBLE MENU LINK -->
                <a data-toggle="collapse" data-target="#nav-searchform" class="collapsed" href="/search/" onclick="return false;"><b class="wtnerd-icomoon icon-search"></b><span class="sr-only">Search</span> <b class="caret"></b></a>

                <div id="nav-searchform" class="collapse" role="menu">
                    <form role="search" method="get" class="input-group" action="<?php echo esc_url( home_url( '/' ) ); ?>">
                        <label for="s" class="sr-only">Search for:</label>
                        <input type="search" class="form-control" id="s" placeholder="Search &hellip;" value="<?php echo esc_attr( get_search_query() ); ?>" name="s">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="submit">Go!</button>
                        </span>
                    </form>
                </div>

            </li>
        </ul>
    </div>
</div>
</nav>

即使禁用了JavaScript，我也希望菜单能够正常运行，这就是我不仅仅使用href="#"的原因。

所以，问题是，Twitter Bootstrap是否有内置的方法来处理我的问题，这样我就不必在HTML中使用onclick JavaScript属性了？如果没有，是否有更好的选择？

Answer 1

我认为您的解决方案很好，我能想到的唯一其他选择是使用preventDefault

$("myElement").on('click', function (e) { e.preventDefault(); })

Answer 2

当然，你可以在准备好的功能中添加这样的东西

$("a[data-toggle='collapse']").click(function (e){
    e.preventDefault();
});

所以你不必添加onclick属性..

Twitter Bootstrap使可折叠菜单链接无法点击（如果启用了JS）？

2 个答案: