wie bekomme ich mein Akkordeon zu öffnen und glyphicon auf Klick drehen und vertausche auf klicken Sie nochmals

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

Auch warum ist die Sidebar 100%, wenn es 250pxwie bekomme ich mein Akkordeon zu öffnen und glyphicon auf Klick drehen und vertausche auf klicken Sie nochmals

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

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

    }); 

});

Auch wenn ich das Glyphicon klicke, wird es durch ein anderes ersetzt und umgekehrt und das Akkordeon funktioniert gut, aber sie arbeiten nicht zusammen, wie ich es beabsichtigte.

Quelle

2016-07-24 scottiescotsman

Sie verwenden Bootstrap, aber Sie verwenden nicht Bootstrap Methoden - für die Sidebar, würde ich mit Bootstrap des Grid-System empfehlen:

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

Das wird das beste Niveau der reaktionsschnellen Support mit Bootstrap ist sicherzustellen, CSS, auf das Sie sich bereits verlassen.

Quelle

2016-07-24 17:47:35 Toby

Wie beim Akkordeon, wenn Sie [Bootstrap's Dokumente] (http://getbootstrap.com/javascript/#collapse-example-accordion) zu diesem Thema folgen, werden Sie feststellen, dass Bootstrap aktiven Akkordeon-Elementen Klassen hinzufügt. IMO, dies ist der beste Weg, um die Stiländerungen zu machen, nach denen Sie fragen. – Toby

wie bekomme ich mein Akkordeon zu öffnen und glyphicon auf Klick drehen und vertausche auf klicken Sie nochmals

Antwort

Verwandte Themen