как я получу свой аккордеон, чтобы открыть и glyphicon вращаться по щелчку и сделать обратный на 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>&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>

Кроме того, почему это боковая панель 100%, когда он должен быть 250pxкак я получу свой аккордеон, чтобы открыть и glyphicon вращаться по щелчку и сделать обратный на reclick

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

    }); 

});

Также, когда я нажимаю на глификон, он заменяется другим, и наоборот, и аккордеон хорошо работает, но они не работают вместе, как я предполагал.

источник

2016-07-24 scottiescotsman

Вы используете 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, на который вы уже полагаетесь.

источник

2016-07-24 17:47:35 Toby

Что касается аккордеона, если вы следуете [Документам Bootstrap] (http://getbootstrap.com/javascript/#collapse-example-accordion) по этому вопросу, вы обнаружите, что Bootstrap добавляет классы в активные элементы аккордеона. IMO, это лучший способ внести изменения в стиль, о которых вы просите. – Toby

как я получу свой аккордеон, чтобы открыть и glyphicon вращаться по щелчку и сделать обратный на reclick

ответ

Смежные вопросы