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

首页课程实战体系课手记专栏慕课教程

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

来源：-

_Sun_

2016-12-15 14:39

<p class="pull-right visible-xs"></p> 当分辨率小的时候就弹出按钮出来但是点击按钮的时候没有显示出列表框list-group出来各位好友求解

写回答关注

4回答

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">

1 0

_Sun_

非常感谢！

2017-04-19 16:19:28

共 1 条回复 >
自始至终J

2017-01-26 16:25:27

应该使用data-toggle绑定

0 0
自始至终J

2017-01-26 16:23:51

会弹。。。前面没点出来

0 0
自始至终J

2017-01-26 16:23:14

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

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

0 0