我有一个Bootstrap侧边栏的HTML,但我不能让“推”转换工作。每当我触发JavaScript时,侧边栏就会在两个状态之间切换。我是否在正确的元素上放置了正确的过渡CSS?
HTML:
<div class="wrapper">
<div class="row row-offcanvas row-offcanvas-left">
<!-- sidebar -->
<div class="column col-sm-3 col-xs-1 sidebar-offcanvas" id="sidebar">
<ul class="nav" id="logo">
<li><a data-toggle="offcanvas" href="#"><i class="glyphicon glyphicon-option-vertical"></i> <span class="collapse in hidden-xs">
<img class="img-responsive2" src="./Pension-Solutions-185x51.png">
</span></a></li>
</ul>
<ul class="nav" id="menu">
<li><a href="#"><i class="glyphicon glyphicon-stats"></i> <span class="collapse in hidden-xs">Work in progress</span></a></li>
<li><a href="#"><i class="glyphicon glyphicon-th-list"></i> <span class="collapse in hidden-xs">Management information</span></a></li>
<li><a href="#"><i class="glyphicon glyphicon-user"></i> <span class="collapse in hidden-xs">Member access</span></a></li>
<li><a href="#"><i class="glyphicon glyphicon-dashboard"></i> <span class="collapse in hidden-xs">Membership statistics</span></a></li>
</ul>
<ul class="nav" id="logout">
<li><a href="#"><i class="glyphicon glyphicon-share"></i> <span class="collapse in hidden-xs">Logout</span></a></li>
</ul>
</div>
<!-- /sidebar -->
<!-- main right col -->
<div class="column col-sm-9 col-xs-11" id="main">
<p>
PAGE CONTENT
</p>
</div>
<!-- /main -->
</div>
</div>
CSS:
@media screen and (max-width: 768px) {
#sidebar {
min-width: 44px;
}
#main {
width: 1%;
left: 0;
}
#sidebar .visible-xs {
display:inline !important;
}
.row-offcanvas {
position: relative;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.row-offcanvas-left.active {
left: 45%;
}
.row-offcanvas-left.active .sidebar-offcanvas {
left: -45%;
position: absolute;
top: 0;
width: 45%;
}
}
@media screen and (min-width: 768px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.row-offcanvas-left.active {
left: 3%;
}
.row-offcanvas-left.active .sidebar-offcanvas {
left: -3%;
position: absolute;
top: 0;
width: 3%;
text-align: center;
min-width:42px;
}
#main {
left: 0;
}
}
JavaScript的:
$(document).ready(function() {
$('[data-toggle="offcanvas"]').click(function() {
$('.row-offcanvas').toggleClass('active');
$('.collapse').toggleClass('in').toggleClass('hidden-xs').toggleClass('visible-xs');
});
})
答案 0 :(得分:0)
转换应该应用于<div ng-repeat="elem in 'main.elem'">
<p>{{'main.array'+elem | translate}}</p>
</div>
元素