bootstrap href data-target 可以是Id,class

bootstrap href data-target 属性值可以是ID，也可以是类。如果填写类的话，就可以应用于多个元素。

学习代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>

<body>
    <div>所有分类： 电影 | 机票 | 电话 |</div>
    <h1>
        分类筛选：
        <a class="accordion-toggle" data-toggle="collapse" href=".collapseOne"> //这里可以是Id,也可以是Class，不过，只能写一个
            点击展开，再次点击折叠。 
        </a>
    </h1>
    <div style="width:10px;">
    <span class="glyphicon glyphicon-arrow-up in collapse collapseOne"></span>
    <span class="glyphicon glyphicon-arrow-down collapse collapseOne"></span>
    </div>
    <div id="collapseOne123" class="collapse collapseOne"> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </div> 
</body>
</html>
posted @ 2016-12-05 12:51  stma  阅读(1004)  评论(0)    收藏  举报