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，然后社交按钮也可以在单击左键上正常工作。

Answer 2

您的Javascript说

$('.row .btn').on('click', function(e) {
    e.preventDefault();
    # . . .
});

所以我会将其定位到特定的“联系我们”按钮，而非所有按钮。

Answer 3

Bootstrap可能是限制性的，不允许您将按钮包装在标签中。就像你在普通的HTML中一样。这是一个我曾经遇到类似问题的解决方案，为你构建一个这样的标签，你仍然应该得到一个函数的按钮。当然，在你的类名中放置。

<a class="btn btn-default glyphicon glyphicon-hand-up"></a>

Bootstrap某些按钮不起作用

3 个答案: