html - Bootstrap 某些按钮不起作用

Question

当鼠标悬停在我的社交按钮上时，会出现超链接，并且可以通过右键单击并选择一个选项来启动该链接，但不能单击一次。它们在 html 中的构建方式不同，以帮助我进行故障排除，但我无法让它们中的任何一个将我发送到各自的社交页面。它们位于社交行的 4 宽列中。我做了一个有点疯狂的嵌套列来让所有东西都居中。感谢您的帮助。

可在此处找到测试站点:http://www.tedrmoke.com/cjs

<div class="jumbotron">
        <div class="container">
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="index.html"></a>
                    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="index.html">Home <span class="sr-only">(current)</span></a></li>
                            <li><a href="sawmill.html">Sawmill</a></li>
                            <li><a href="lumber">Purchase</a></li>
                        </ul>
                    </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
            </nav>
    <!-- Jumbotron -->
            <div class="row text-center jumbo">
                <h1>Hello! We are <br/><span>CJ Sawmill &amp; Lumber</span></h1>
                <h3>We specialize in coming to you and cutting your lumber in the central NJ area. We also have a selection of quality cured cuts available for purchase.</h3>
                <div class="row">
                <div class="col-xs-2"></div>
                 <div class="col-xs-8 social">
                 <div class="col-sm-8">
                <div class="collapse-group"> <a href="#" class="btn btn-primary btn-lg">Contact Us.</a>
            <form class="collapse" name="contactform" method="post" action="http://www.cjsawmill-lumber.com/send_form_email.php">
                <table class"col-lg-12 text-left" >
                    ...
                </table>
            </form>
            </div>
            </div> <!-- row -->
            <div class="col-sm-4">
                <a href="http://www.twitter.com/cjsawmill"><div class="btn btn-default twi_btn"></div></a>
                <a class="btn btn-default fb_btn" href="http://www.facebook.com/cjsawmill"></a>
            </div>
            </div> <!-- col-6 button row -->
            <div class="col-xs-2"></div>
            </div> <!-- button row -->
            </div>
        </div> <!-- container -->
   </div> <!-- end jumbotron -->

Answer 1

那是因为在你的 javascript 中:

// JavaScript Document

$('.row .btn').on('click', function(e) {
    e.preventDefault();
    var $this = $(this);
    var $collapse = $this.closest('.collapse-group').find('.collapse');
    $collapse.collapse('toggle');
});

，当类 btn 的元素在类 row 的元素中被点击时，您将阻止默认事件。

请注意，在您的 HTML 中，您的 facebook 和 twitter 的超链接和 div 分别属于 btn 类，因此，无论何时单击它们，默认事件(即重定向到它们的 href) 被阻止，这就是为什么链接在单击时不起作用，但它们在右键单击时起作用，因为右键单击仅使用 href 属性将您重定向到新链接。

尝试删除 e.preventDefault(); 应用于您的超链接或超链接内的 div，然后社交按钮也应该在单击左键时正常工作。