我如何让我的手风琴打开 & glyphicon 在点击时旋转并在重新点击时反转

Question

<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>&nbsp;&nbsp;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>&nbsp;&nbsp;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>&nbsp;&nbsp;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>&nbsp;&nbsp;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>&nbsp;&nbsp;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>&nbsp;&nbsp;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>&nbsp;&nbsp;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>&nbsp;&nbsp;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>

还有为什么侧边栏应该是 250px 却变成了 100%

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二

$(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');
        }

    });

});

此外，当我单击字形图标时，它会被另一个字形图标替换，反之亦然，手风琴效果很好，但它们不能像我预期的那样一起工作。

Answer 1

您正在使用 Bootstrap，但您没有使用 Bootstrap 的方法 - 对于边栏，我建议使用 Bootstrap 的网格系统：

<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 提供最佳水平的响应支持。

我如何让我的手风琴打开 & glyphicon 在点击时旋转并在重新点击时反转

how do i get my accordion to open & glyphicon to rotate on click and do reverse on reclick

javascript

css

jquery

glyphicons