我该如何打开我的手风琴&字形图标在单击时旋转，在重新单击时反转
how do i get my accordion to open & glyphicon to rotate on click and do reverse on reclick
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>www.scottiescotsman.com</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="fonts/css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="../assets/js/ie8-responsive-file-warning.js"></script>
<![endif]-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<div id="header">
<div class="logo"><a href="#">SCOTTIE<span>SCOTSMAN</span></a></div>
</div>
<a class="mobile" href="#">MENU</a>
<div id="container-fluid">
<div class="sidebar">
<ul class="accordion">
<li class="general">
<a href="#"><span class="glyphicon glyphicon-chevron-right pull-left"></span> FORMS<span class="pull-right">10</span></a>
<ul class="sub-menu">
<li><a href="#">GENERAL FORMS</a></li>
<li><a href="#">ADVANCED COMPONENTS</a></li>
<li><a href="#">FORM VALIDATION</a></li>
<li><a href="#">FORM WIZARD</a></li>
<li><a href="#">FORM UPLOAD</a></li>
<li><a href="#">FORM BUTTONS</a></li>
</ul>
</li>
<li class="ui_elements">
<a href="#"><span class="glyphicon glyphicon-chevron-right pull-left"></span> UI ELEMENTS<span class="pull-right">10</span></a>
<ul class="sub-menu">
<li><a href="#">GENERAL ELEMENTS</a></li>
<li><a href="#">MEDIA GALLERY</a></li>
<li><a href="#">TYPOGRAPHY</a></li>
<li><a href="#">ICONS</a></li>
<li><a href="#">GLYPHICONS</a></li>
<li><a href="#">WIDGETS</a></li>
<li><a href="#">INVOICE</a></li>
<li><a href="#">INBOX</a></li>
<li><a href="#">CALENDAR</a></li>
</ul>
</li>
<li class="monitoring">
<a href="#"><span class="glyphicon glyphicon-chevron-right pull-left"></span> MONITORING<span class="pull-right">10</span></a>
<ul class="sub-menu">
<li><a href="#">PANELS</a></li>
<li><a href="#">TYPOGRAPHY</a></li>
<li><a href="#">ICONS</a></li>
<li><a href="#">BUTTONS</a></li>
<li><a href="#">TABS</a></li>
<li><a href="#">MODALS</a></li>
<li><a href="#">ALERTS</a></li>
<li><a href="#">GRID SYSTEM</a></li>
<li><a href="#">DRAGGABLE</a></li>
</ul>
</li>
<li class="table-design">
<a href="#"><span class="glyphicon glyphicon-chevron-right pull-left"></span> TABLE DESIGN<span class="pull-right">10</span></a>
<ul class="sub-menu">
<li><a href="#">TABLE STYLES</a></li>
<li><a href="#">DATA TABLES</a></li>
</ul>
</li>
<li class="charts">
<a href="#"><span class="glyphicon glyphicon-chevron-right pull-left"></span> CHARTS / GRAPHS<span class="pull-right">10</span></a>
<ul class="sub-menu">
<li><a href="#">PLOT LINE</a></li>
<li><a href="#">SPARKLINE</a></li>
</ul>
</li>
<li class="basic">
<a href="#"><span class="glyphicon glyphicon-chevron-right pull-left"></span> BASIC<span class="pull-right">10</span></a>
<ul class="sub-menu">
<li><a href="#">PROFILE</a></li>
<li><a href="#">SUPPORT</a></li>
<li><a href="#">LIST</a></li>
<li><a href="#">TIMELINE</a></li>
</ul>
</li>
<li class="common">
<a href="#"><span class="glyphicon glyphicon-chevron-right pull-left"></span> COMMON<span class="pull-right">10</span></a>
<ul class="sub-menu">
<li><a href="#">ERROR 404 PAGE</a></li>
<li><a href="#">ERROR 500 PAGE</a></li>
<li><a href="#">LOGIN PAGE</a></li>
<li><a href="#">SIGN UP PAGE</a></li>
<li><a href="#">FORGOT PASSWORD</a></li>
</ul>
</li>
<li class="additional-pages">
<a href="#"><span class="glyphicon glyphicon-chevron-right pull-left"></span> ADDITIONAL PAGES<span class="pull-right">10</span></a>
<ul class="sub-menu">
<li><a href="#">E-COMMERCE</a></li>
<li><a href="#">E-COMMERCE BACKEND</a></li>
<li><a href="#">PROJECTS</a></li>
<li><a href="#">PROJECT DETAIL</a></li>
<li><a href="#">CONTACTS</a></li>
<li><a href="#">PROFILE</a></li>
<li><a href="#">ALERTS</a></li>
<li><a href="#">GRID SYSTEM</a></li>
<li><a href="#">DRAGGABLE</a></li>
</ul>
</li>
</ul>
<div class="sidebar-footer hidden-small navbar-fixed-bottom">
<a title="Settings" data-toggle="tooltip" data-placement="top">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
</a>
<a title="FullScreen" data-toggle="tooltip" data-placement="top">
<span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
</a>
<a title="Lock" data-toggle="tooltip" data-placement="top">
<span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
</a>
<a title="Logout" data-toggle="tooltip" data-placement="top">
<span class="glyphicon glyphicon-off" aria-hidden="true"></span>
</a>
</div>
</div>
<div class="content">
<h1>DASHBOARD</h1>
<p></p>
<div id="box">
<div class="box-top">NEWS</div>
<div class="box-panel">
Lorem ipsum dolor sit amet, has in molestie apeirian, at nostro maiestatis pro. Cu vim clita aperiri suscipiantur, usu soluta iuvaret definiebas ad, postea labitur quaerendum ex eam. Aperiri partiendo ea vix, ad ferri nobis nec. Consul quaeque facilis at quo, aliquid facilis adipiscing vel te.
</div>
</div>
</div>
</div>
</body>
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/accordion.js"></script>
<script src="js/rotateChevron.js"></script>
<script src="js/general.js"></script>
</html>
为什么侧边栏是100%，而它应该是250px
CSS
@import url("http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600,700");
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
font-family: 'Open Sans';
color: #ddd;
background-color: #2c3e50;
}
a, a:focus, a:hover, a:active
{
text-decoration: none;
outline: 0;
}
ul
{
list-style: none;
}
div#header
{
width: 100%;
height: 50px;
background-color: #2c3e50;
margin: 0 auto;
}
.logo
{
float: left;
margin-top: 10px;
margin-left: 16px;
}
.logo a
{
font-size: 1.3em;
color: #fff;
}
.logo a span
{
font-weight: 300;
}
div#container
{
width: 100%;
margin: 0 auto;
}
span.glyphicon
{
font-size: 16px;
color: #fff;
}
div#sidebar
{
width: 250px;
height: auto;
background-color: #2c3e50;
float: left;
}
ul.accordion li a
{
color: #ccc;
display: block;
padding: 8px;
}
.accordion li > .sub-menu
{
display: none;
}
.accordion li:target > .sub-menu
{
display: block;
}
.sub-menu
{
padding-left: 10px;
}
.sub-menu li a
{
color: #000;
}
div#content
{
width: auto;
margin-left: 250px;
height: 100%;
background-color: #95a5a6;
padding: 16px;
}
.content p
{
color: #424242;
font-size: 0.8em;
}
div#box
{
margin-top: 16px;
}
div#box .box-top
{
color: #fff;
background-color: #2c3e50;
padding: 5px;
padding-left: 16px;
}
div#box .box-panel
{
padding: 16px;
background-color: #fff;
}
a.mobile
{
display: block;
color: #fff;
background-color: #000;
text-align: center;
padding: 7px;
}
a.mobile:active
{
background-color: #4a4a4a;
}
@media only screen and (max-width: 320px)
{
.sidebar {
width: 100%;
display: none;
}
.content {
margin-left: 0px;
}
}
@media only screen and (min-width: 320px)
{
a.mobile {
display: none;
}
.sidebar {
height: 100%;
display: block;
}
}
JAVASCRIPT
$(document).ready(function () {
$('.glyphicon').click(function () {
$(this).toggleClass("glyphicon-chevron-down").toggleClass("glyphicon-chevron-right");
});
});
JAVASCRIPT II
$(document).ready(function() {
var accordion_head = $('.accordion > li > a'),
accordion_body = $('.accordion li > .sub-menu');
/* accordion_head.first().addClass('active').next().slideDown('normal'); */
accordion_head.on('click', function(event) {
event.preventDefault();
if ($(this).attr('class') != 'active'){
accordion_body.slideUp('normal');
$(this).next().stop(true,true).slideToggle('normal');
accordion_head.removeClass('active');
$(this).addClass('active');
} else {
accordion_body.slideUp('normal');
accordion_head.removeClass('active');
}
});
});
此外，当我点击字形图标时，它会被另一个替换，反之亦然，手风琴可以很好地工作，但它们并没有像我想要的那样协同工作。
您使用的是Bootstrap，但没有使用Bootstrap的方法-对于侧边栏，我建议使用Bootstrap's网格系统：
<div class="container">
<div class="row">
<div class="col-sm-9">
<!-- MAIN CONTENT HERE -->
</div>
<div class="col-sm-3">
<!-- Sidebar HERE -->
</div>
</div>
</div>
这将确保使用您已经依赖的Bootstrap的CSS提供最佳级别的响应支持。
相关文章：
- 通过单击表单中的按钮，在代码生成中使用javascript生成字母数字代码
- 单击表单中的按钮会导致页面刷新
- Ng点击记住单选按钮选择
- 如何在Firefox中禁用视频的单击和双击控件
- 单击或点击切换HTML文本
- 单击表单的“提交”按钮时，获取表单中的所有INPUT和ACTION标记
- 单击新 DOM 对象时的操作
- Javascript在右键单击新选项卡时未执行
- window.打开一个新页面，然后单击新页面中的链接 - JavaScript
- 单击新插入的变量块中的关闭按钮时没有任何反应
- 单击新添加的链接不会执行JavaScript函数
- 单击新 DOM 元素不起作用的事件
- 单击按钮更改按钮上的 ID 值，单击新 ID 更改回原始 ID 与 Jquery 一起使用
- jquery:单击新项目时重置css
- 在引导中单击新选项卡时验证前一个选项卡
- 链接没有打开，除非当我右键单击新标签
- 在单击新按钮时切换链接/按钮颜色
- 单击新元素时停止淡入淡出动画
- 砌体，单击新项目时删除“is_expanded”类
- 在提交上单击新选项卡打开表单
