Question

我正在尝试使用Bootstrap开关，默认设置为关闭但是当我点击它时它不会改变？

我抓住了这个网站的代码，工作正常：http://www.bootply.com/92189 也许我错过了什么？我真的不确定。

编辑： 为什么它不能与脚本标签中的javascript一起使用，而是在JSFiddles javascript容器中工作？ http://prntscr.com/47xuqk http://prntscr.com/47xuy6

感谢

JSFiddle HERE

使用Javascript：

$('.btn-toggle').click(function() {
    $(this).find('.btn').toggleClass('active');  

    if ($(this).find('.btn-primary').size()>0) {
        $(this).find('.btn').toggleClass('btn-primary');
    }
    if ($(this).find('.btn-danger').size()>0) {
        $(this).find('.btn').toggleClass('btn-danger');
    }
    if ($(this).find('.btn-success').size()>0) {
        $(this).find('.btn').toggleClass('btn-success');
    }
    if ($(this).find('.btn-info').size()>0) {
        $(this).find('.btn').toggleClass('btn-info');
    }

    $(this).find('.btn').toggleClass('btn-default');

});

$('form').submit(function(){
    alert($(this["options"]).val());
    return false;
});

HTML：

<h4>Tiny</h4>
  <div class="btn-group btn-toggle"> 
    <button class="btn btn-xs btn-default">ON</button>
    <button class="btn btn-xs btn-primary active">OFF</button>
  </div>

Answer 1

您还没有包含jQuery，这是某些Bootstrap元素的必需依赖项。您还引用了默认的全局jQuery变量（$）。

添加jQuery框架，你应该很高兴：

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Bootstrap开关没有切换

1 个答案: