0

我正在尝试使用Twitter Bootstrap 的 Collapse 插件<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 是否有内置方法来处理我的问题，这样我就不必onclick在 HTML 中使用 JavaScript 属性？如果没有，有没有更好的选择？

4

2 回答 2

1

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

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

于 2013-10-30T13:48:17.467 回答
-1

当然，您可以在 ready 函数中添加类似的内容

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

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

于 2013-10-30T13:52:42.093 回答