javascript - Bootstrap 4 Toggle Button 与本地 js 文件不工作

Question

我在这里找到的切换按钮无法正常工作: https://codepen.io/aanjulena/pen/ZLZjzV

我在标题部分链接了这些文件:

<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="js/jquery-3.3.1.min.js" rel="script"/>
<link href="js/bootstrap.js" rel="script"/>
<link href="js/popper.js" rel="script"/>
<link href="css/switch.css" rel="stylesheet"/>
<link href="css/fontawesome-all.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

我的切换按钮呈现正确，但点击时不切换:

<div class="col-sm-5">
  <button type="button" class="btn btn-lg btn-toggle" data-toggle="button" aria-pressed="false" autocomplete="off">
     <div class="handle"></div>
  </button>
</div>

Answer 1

您忘记了 codpen 中包含的 css 的相关部分:

.btn-toggle.active {
    background-color: #29b5a8;
}
.btn-toggle.btn-lg {
    margin: 0 5rem;
    padding: 0;
    position: relative;
    border: none;
    height: 2.5rem;
    width: 5rem;
    border-radius: 2.5rem;
}
.btn-toggle.btn-lg:focus,
.btn-toggle.btn-lg.focus,
.btn-toggle.btn-lg:focus.active,
.btn-toggle.btn-lg.focus.active {
    outline: none;
}
.btn-toggle.btn-lg:before,
.btn-toggle.btn-lg:after {
    line-height: 2.5rem;
    width: 5rem;
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: absolute;
    bottom: 0;
    transition: opacity .25s;
}
.btn-toggle.btn-lg:before {
    content: 'Off';
    left: -5rem;
}
.btn-toggle.btn-lg:after {
    content: 'On';
    right: -5rem;
    opacity: .5;
}
.btn-toggle.btn-lg > .handle {
    position: absolute;
    top: 0.3125rem;
    left: 0.3125rem;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 1.875rem;
    background: #fff;
    transition: left .25s;
}
.btn-toggle.btn-lg.active {
    transition: background-color 0.25s;
}
.btn-toggle.btn-lg.active > .handle {
    left: 2.8125rem;
    transition: left .25s;
}
.btn-toggle.btn-lg.active:before {
    opacity: .5;
}
.btn-toggle.btn-lg.active:after {
    opacity: 1;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>



<div class="col-sm-5">
    <button type="button" class="btn btn-lg btn-toggle" data-toggle="button" aria-pressed="false" autocomplete="off">
        <div class="handle"></div>
    </button>
</div>