Question

我使用boostrap版本3.3.7创建了一系列单选按钮。我还添加了一个功能，当我点击其中一个按钮时，单选按钮的颜色必须永久变为蓝色。当我使用版本bootstrap加载jQuery插件时，一切正常，如下所示

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

但这会导致我实施的切换按钮出错，它应该作为下拉列表工作。如果我反转加载jquery和bootstrap的顺序，那么下拉列表将全部正常工作，导致单选按钮出错。我想提一下，单选按钮和切换按钮是我正在处理的不同功能。这已经成为一个棘手的问题需要解决。我可以知道哪个版本的jquery可以兼容Bootstrap版本3.3.7兼容的功能。请找到下面的代码。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
    <a href="#">
        <i class="glyphicon glyphicon-dashboard"></i>
        Dashboard
    </a>
    <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" name="MontageSwap" id="MontageSwap"
       onchange="montageSwap(this.value);">
        <i class="glyphicon glyphicon-duplicate"></i>
        Montage
    </a>
    <ul class="collapse list-unstyled" id="pageSubmenu">
        <li><a href="#" id="1" ">Car</a></li>
        <li><a href="#" id="2" ">Bus</a></li>
        <li><a href="#" id="3" ">Bicycle</a></li>
    </ul>
</li>

<style>
    .btn-default {
        color: #D8D8D8;
        background-color: #D8D8D8;
        border-color: #D8D8D8;
    }

    .btn-default:hover {
        background-color: #5F5A66;
    }

    .btn-default.active {
        background-color: #4A90E2;
    }

</style>
<div class="w3-display-container col-md-12 col-sm-10 col-xs-8" style="position:relative;top:1px;bottom:0;">

    <div class="row">
        <div class="btn-group btn-group-justified" data-toggle="buttons">

            <label class="btn btn-default">
                <input type="radio" name="options" id="option1" autocomplete="off" autocomplete="off"
                       onchange="dataSegment(0)" checked>
            </label>
            <label class="btn btn-default">
                <input type="radio" name="options" id="option2" autocomplete="off" onchange="dataSegment(1)">
            </label>
            <label class="btn btn-default">
                <input type="radio" name="options" id="option3" autocomplete="off" onchange="dataSegment(2)">
            </label>
            <label class="btn btn-default">
                <input type="radio" name="options" id="option4" autocomplete="off" onchange="dataSegment(3)">
            </label>

        </div>
    </div>
</div>

<script>
    $('.btn.btn-default').on("click", function () {
        $(this).addClass('active');
    });
</script>

单选按钮应如何工作

他们实际上是如何为我工作

Answer 1

bootstrap和jquery的兼容性没有任何问题。使用单选按钮时，只能有一个活动按钮。并且由于您仅将蓝色添加到具有活动类的蓝色，因此在单击另一个按钮时，活动类将转移到新单击的按钮。当你切换jquery和bootstrap的位置时单选按钮被修复的唯一原因是因为bootstrap不再工作并导致错误。您可以通过使用复选框而不是无线电来实现所需行为的最佳方式。

但是如果你想坚持使用单选按钮，你需要为你的颜色制作另一个类。这是我做的，来自你的css代码：

.btn-default.active {
   background-color: #4A90E2;
 }

我把它改为：

.btn-default.color {
   background-color: #4A90E2;
}

并补充说：

.btn-default.focus{
   background-color: #4A90E2 !important;
}

单击元素时

覆盖focus类。

对于脚本，我将active更改为color

$('.btn.btn-default').on("click", function () {
    $(this).addClass('color');
});

为了摆脱你创建的栏下面的小方块，我添加了这个：

input[type=radio]{
   margin-top:-6px;
}

您可以访问JSBin示例here

正如你在那里看到的，这两个功能都运行良好。：）

bootstarp单选按钮和切换按钮

1 个答案: