个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我当前正在使用 Bootstrap 面板，但无法禁用该面板。我添加了残疾人类(class)，但没有参加。如何使用 jquery 或 css 禁用 Bootstrap 中的面板。下面我粘贴了代码。
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="panel-group" id="accordion">
<div class="panel panel-default disabled" id='result' disabled>
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a><i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</body>
</html>最佳答案
如果您想在 Bootstrap 中禁用折叠或“显示折叠”功能，则可以使用 hide.bs.collapse 和 show.bs.collapse 事件.
示例:添加以下 HTML 来调用禁用功能!
<button class="btn btn-primary" id="btnDisable">click to disable</button>
然后跟随 JS 就可以了。
var disablePanel = false; //or falsey value
$("#accordion").on('hide.bs.collapse show.bs.collapse', PanelEvent);
function PanelEvent(e){
$self = (this);
if(disablePanel){
e.preventDefault(); // this is the trick
console.log("panel should not behave");
}
else{
console.log("panel opens or closes!");
}
};
$("#btnDisable").click(function(e){
disablePanel = true; //or truthy value
console.log(goAhead);
});
注意:重要的部分是利用 hide.bs.collapse 和 show.bs.collapse 事件。上面的示例只是利用这些事件的一种方法。
警告:hidden.bs.collapse 和 shown.bs.collapse 事件在 Accordion 折叠后触发，因此这些事件不会努力禁用面板[ Accordion ]。
关于jquery - 如何在 Bootstrap 中禁用面板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30444404/
25
4
0
我是一名优秀的程序员,十分优秀！