Выползающий сайдбар
Написал скрипт, но почему-то после первого нажатия когда класс стал fbopen на fbclose не меняется. Помогите кто чем может и в чем ошибка подскажите.
Код:
if ( $(".sidebar").hasClass("sbclose") ) { |
anar1811,
в клике должно быть условие а не наоборот :cray:
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<style>
body{margin:0;padding:0;width:100%;height:100%;overflow:hidden}
.sidebar{background:#333;position:absolute;top:0;bottom:0;left:-30%;height:auto;width:30%;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out}
.sbopen{left:0}
.sbclose{left:-30%}
.sbopen+.main{margin-left:30%}
.sidebar-span{width:500px}
.header{height:50px;background:#008000}
.main{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out}
.content{}
.button-area-show,.button-area-close{left:0;top:0px;background:#ccc;height:50px;width:50px}
</style></head><body>
<div class="sidebar sbclose">
<span class="sidebar-span">sadadsdasdasdasdasdasdasdasd</span>
</div>
<div class="main">
<div class="header">
<a class="sbbtn opener" href="#">Открыть</a>
</div>
<div class="content">
dsfsdfasdfdfadsfadsfasdfsdf
</div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
$('.sbbtn').click(function () {
$(this).toggleClass('opener closer');
$('.sidebar').toggleClass('sbopen sbclose');
});
</script>
</body></html>
|
Цитата:
$(".sbbtn").click(function(){
if($(".sbbtn").hasClass("opener"))
{
$(".sbbtn").removeClass( "opener" ).addClass('closer');
$(".sidebar").removeClass( "sbclose" ).addClass('sbopen');
$('.main').animate({width: '70%',margin:'0 0 0 30%'}, 100);
}
else
{
$(".sbbtn").removeClass( "closer" ).addClass('opener');
$(".sidebar").removeClass( "sbopen" ).addClass('sbclose');
$('.main').animate({width: '100%',margin:'0'}, 100);
}
});
Так что-ли ? |
Спасибо за совет
|
Цитата:
правда половина строк ненужна, но уже гораздо лучше. |
рони, не подскажешь как реализовать кукисы или хороший туториал?
$(".sbbtn").click(function(){
if($(".sbbtn").hasClass("opener"))
{
$(".sbbtn").removeClass( "opener" ).addClass('closer');
$(".sidebar").removeClass( "sbclose" ).addClass('sbopen');
$('.main').animate({width: '80%',margin:'0 0 0 20%'},60);
$('.rsidebar').animate({width: '0'},60);
$('.content').animate({width: '100%'},60);
}
else
{
$(".sbbtn").removeClass( "closer" ).addClass('opener');
$(".sidebar").removeClass( "sbopen" ).addClass('sbclose');
$('.main').animate({width: '100%',margin:'0'},0);
$('.rsidebar').animate({width: '0',margin:'0 0 0 0'},60);
$('.rsidebar').animate({width: '20%'},60);
$('.content').animate({width: '80%'},60);
}
});
|
|
$(".sbbtn").click(function(){
if($(".sbbtn").hasClass("opener"))
{
localStorage.setItem('sideclass', 'closer');
var classop = localStorage.getItem('sideclass');
$(".sbbtn").removeClass( "opener" ).addClass(classop);
$(".sidebar").removeClass( "sbclose" ).addClass('sbopen');
$('.main').animate({width: '80%',margin:'0 0 0 20%'},60);
$('.rsidebar').animate({width: '0'},60);
$('.content').animate({width: '100%'},60);
$('.sbbtn').addClass(classop);
}
else
{
localStorage.setItem('sideclass', 'opener');
var classcl = localStorage.getItem('sideclass');
$(".sbbtn").removeClass( "closer" ).addClass(classcl);
$(".sidebar").removeClass( "sbopen" ).addClass('sbclose');
$('.main').animate({width: '100%',margin:'0'},0);
$('.rsidebar').animate({width: '0',margin:'0 0 0 0'},60);
$('.rsidebar').animate({width: '20%'},60);
$('.content').animate({width: '80%'},60);
}
});
так что-ли? НО ничего не берет из локал сторедж |
anar1811,
бред не пишите и будет брать в клике только запоминание индекса кликнутого элемента. до клика код который откроет запомненный в прошлый раз элемент. |
Спасибо,рони. Не знаю как,но написал. И что странно работает. А есть на русском материал для изучения, а то я не вник в суть работы скрипта. Методом тыка написал
var items = JSON.parse(window.localStorage.getItem('x') || "{}");
var butt = $('.lfb-butt');
for(var key in items) {
if (items.hasOwnProperty(key)) {
$('.leftbar').eq(key).addClass('opener');
$('.rightbar').eq(key).addClass('rbclose');
$('.sidebar').eq(key).addClass('sbclose');
$('.content').eq(key).addClass('cclose');
}
}
butt.click(function(event) {
if($('.leftbar').hasClass( "opener" ))
{
event.stopPropagation();
var i = butt.index(this);
items[i] = 1;
window.localStorage.removeItem('x', JSON.stringify(items));
$('.leftbar').eq(i).removeClass('opener');
$('.rightbar').eq(i).removeClass('rbclose');
$('.sidebar').eq(i).removeClass('sbclose');
$('.content').eq(i).removeClass('cclose');
}else
{
event.stopPropagation();
var i = butt.index(this);
items[i] = 1;
window.localStorage.setItem('x', JSON.stringify(items));
$('.leftbar').eq(i).addClass('opener');
$('.rightbar').eq(i).addClass('rbclose');
$('.sidebar').eq(i).addClass('sbclose');
$('.content').eq(i).addClass('cclose');
}
})
|
| Часовой пояс GMT +3, время: 10:01. |