代码之家 › 专栏 › 技术社区 › automatix

添加引导切换时,链接内的复选框行为错误

twitter-bootstrap-3 checkbox twitter-bootstrap css html

automatix · 技术社区 · 6 年前

有三个内容块,我想用引导程序的 data-* “工具”。控制元件应 checkbox 锿。显示内容块时,其 复选框 checked .

问题是 复选框 将引导行为添加到包装后,内部链接没有按预期工作(仅在第二次单击后才开始更改状态) a 标签。

here .

长版本

因此,首先,我创建了内容块和控件,但没有任何功能(并为它们提供了一些样式):

<div class="col-xs-12" id="select-panel">
    <div class="col-lg-12" id="filter-bar">
        <div>
            <a href="#containerFoo">
                <label class="btn btn-primary" id="filterFoo">
                    <input type="checkbox" checked autocomplete="off">
                    <span class="text-label">foo</span>
                    <span class="glyphicon glyphicon-question-sign"></span>
                </label>
            </a>
            <a href="#containerBar">
                <label class="btn btn-primary" id="filterBar">
                    <input type="checkbox" checked autocomplete="off">
                    <span class="text-label">bar</span>
                    <span class="glyphicon glyphicon-ok-sign"></span>
                </label>
            </a>
            <a href="#containerBuz">
                <label class="btn btn-primary" id="filterBuz">
                    <input type="checkbox" checked autocomplete="off">
                    <span class="text-label">buz</span>
                    <span class="glyphicon glyphicon-remove-sign"></span>
                </label>
            </a>
        </div>
    </div>
</div>

<div>&nbsp;</div>

<div class="panel panel-default in" id="containerFoo">foo</div>
<div class="panel panel-default in" id="containerBar">bar</div>
<div class="panel panel-default in" id="containerBuz">buz</div>

复选框 A 标签扩展如下:

...
<a href="#containerFoo" data-toggle="collapse" aria-expanded="true" aria-controls="containerFoo">
    ...
</a>
<a href="#containerBar" data-toggle="collapse" aria-expanded="true" aria-controls="containerBar">
    ...
</a>
<a href="#containerBuz" data-toggle="collapse" aria-expanded="true" aria-controls="containerBuz">
    ...
</a>
...

复选框 他们总是 . 好吧,在那之后我还延长了 DIV 包装控件锿:

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

现在 复选框 他们的行为越来越奇怪。第一次单击保持打开状态( 选中的 ). 从第二次点击 复选框

如何获得 复选框 当使用引导切换时,内部链接是否正常工作?

1 回复 | 直到 6 年前

Community CDub 4 年前

我会保留链接并删除表单元素。

复选框可以从一个带有或不带有复选标记的伪对象中提取。

基本思路如下: https://jsfiddle.net/jsL3dx1w/7/

#filter-bar {
    margin: 0;
    padding: 0;
    white-space: nowrap;
    text-align: right;
}

#filter-bar * {
    box-sizing: border-box;
}

#filter-bar a,
#filter-bar a:hover {
    text-decoration: none;
}
a[data-toggle]:before {
  display:inline-block;
  content:'\2713';
  border:solid 1px white;
  box-shadow:inset 0 0 2px black, 0 0 1px black;
  line-height:0.6em;
  color:darkblue;
  width:0.8em;height:0.8em;
}
a[data-toggle].collapsed:before {content:''}
#filter-bar  {
    outline: none;
    border: 0;
    color: #ffffff;
}

#filter-bar  span{
    margin: 5px 5px 0 5px;
    outline: 0;
}

#filter-bar .btn:active,
#filter-bar .btn.active {
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#containerFoo,
#filter-bar #filterFoo {
    background: #f5a623;
}

#containerBar,
#filter-bar #filterBar {
    background: #50c14e;
}

#containerBuz,
#filter-bar #filterBuz {
    background: #d21f31;
}

.clear {
    float: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<link href="https://cdn.rawgit.com/twbs/bootstrap/v3.3.7/dist/css/bootstrap.css" rel="stylesheet"/>
<div class="col-xs-12" id="select-panel">
<div class="col-lg-12" id="filter-bar">
    <div class="btn-group" data-toggle="buttons">
        <a href="#containerFoo" data-toggle="collapse" aria-expanded="true" aria-controls="containerFoo"class="btn btn-primary" id="filterFoo">
            <span class="text-label">foo</span>
            <span class="glyphicon glyphicon-question-sign"></span>
        </a>
        <a href="#containerBar" data-toggle="collapse" aria-expanded="true" aria-controls="containerBar" class="btn btn-primary" id="filterBar">
            <span class="text-label">bar</span>
            <span class="glyphicon glyphicon-ok-sign"></span>
        </a>
        <a href="#containerBuz" data-toggle="collapse" aria-expanded="true" aria-controls="containerBuz" class="btn btn-primary" id="filterBuz">
            <span class="text-label">buz</span>
            <span class="glyphicon glyphicon-remove-sign"></span>
        </a>
    </div>
</div>
</div>

<div>&nbsp;</div>

<div class="panel panel-default in" id="containerFoo">
foo
</div>
<div class="panel panel-default in" id="containerBar">
bar
</div>
<div class="panel panel-default in" id="containerBuz">
buz
</div>

wrote

我把你的解决方案编辑了一下。原理仍然是一样的,但通过图标实现: http://jsfiddle.net/automatix/jsL3dx1w/41