我怎么让手风琴打开＆amp;在点击时旋转的glyphicon，并在重新点击时反向

时间：2016-07-24 17:33:15

标签： javascript jquery css glyphicons 

$ sh pseudopipe.sh 
before pseudopipe: a: bar
UID        PID  PPID  C STIME TTY          TIME CMD
root         1     0  0 Jul22 ?        00:00:06 /sbin/init splash
after pseudopipe:  a: foo

另外，为什么侧栏100％应为250px

CSS 

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

JAVASCRIPT 

@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 II 

$(document).ready(function () {
$('.glyphicon').click(function () {
    $(this).toggleClass("glyphicon-chevron-down").toggleClass("glyphicon-chevron-right");
});
});

当我点击glyphicon时，它会被另一个替换，反之亦然，手风琴效果很好，但他们并没有按照我的意图一起工作。

1 个答案:

答案 0 :(得分：0)

你正在使用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提供最佳响应支持。

相关问题
最新问题