1. 首页
  2. 问答
  3. 如何让我的手风琴打开和glyphicon上点击旋转，做对reclick

如何让我的手风琴打开和glyphicon上点击旋转，做对reclick

2016-07-24 46 views
0 
<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％时，它应该是250像素如何让我的手风琴打开和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

回答

0

您使用的引导，但你不使用引导的方法 - 侧边栏，我建议用引导的网格系统：

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

这将使用保证及时的支持的最好水平引导的你已经依赖的CSS。

来源

2016-07-24 17:47:35 Toby

+1

至于手风琴，如果您按照主题上的[Bootstrap的文档]（http://getbootstrap.com/javascript/#collapse-example-accordion），您会发现Bootstrap会将类添加到活动的手风琴元素中。国际海事组织，这是使你所问的风格变化的最佳方式。 – Toby

相关问题

 相关问题