怎么让按钮弹出list-group呢？

个回答

Joker_JOkes

2017-03-19 00:29:00

已采纳

我查看了例子中的源码，有个offcanvas.css和offcanvas.js需要加载。
offcanvas.css的源码：
/*
* Style tweaks
* --------------------------------------------------
*/
/*html,
body {
overflow-x: hidden; Prevent scroll on narrow devices
}
body {
padding-top: 70px;
}
footer {
padding: 30px 0;
}*/
/*
* Off Canvas
* --------------------------------------------------
*/
@media screen and (max-width: 767px) {
.row-offcanvas {
position: relative;
-webkit-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas-right {
right: 0;
}
.row-offcanvas-left {
left: 0;
}
.row-offcanvas-right
.sidebar-offcanvas {
right: -50%; /* 6 columns */
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -50%; /* 6 columns */
}
.row-offcanvas-right.active {
right: 50%; /* 6 columns */
}
.row-offcanvas-left.active {
left: 50%; /* 6 columns */
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 50%; /* 6 columns */
}
}

offcanvas.js的源码：
$(document).ready(function () {
$('[data-toggle="offcanvas"]').click(function () {
$('.row-offcanvas').toggleClass('active')
});
});

在 .html代码中加载这两个文件，样式和行为才能起效。
贴两个代码片段，你可以根据这个代码片段定位到你的代码，做相应修改：
这里调用了样式，button调用了data-toggle方法
<div class="container-fluid">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-sm-9">
<p class="pull-right visible-xs">
<button class="btn-xs btn btn-primary" data-toggle="offcanvas">Toggle</button>
</p>

下面是list-group需要加载的样式
<div class="col-sm-3 sidebar-offcanvas" id="sidebar">
<ul class="list-group">

0
自始至终J

2017-01-26 16:25:27

应该使用data-toggle绑定

0
自始至终J

2017-01-26 16:23:51

会弹。。。前面没点出来

0
自始至终J

2017-01-26 16:23:14

官方这个网站也不会弹出来的，你可以看看

http://getbootstrap.com/examples/offcanvas/

0

怎么让 按钮弹出list-group呢？

个回答

怎么让按钮弹出list-group呢？