27.08.2015, 22:25
|
|
Интересующийся
|
|
Регистрация: 26.08.2012
Сообщений: 18
|
|
|
Выползающий сайдбар
Написал скрипт, но почему-то после первого нажатия когда класс стал fbopen на fbclose не меняется. Помогите кто чем может и в чем ошибка подскажите.
|
Код:
|
if ( $(".sidebar").hasClass("sbclose") ) {
if($(".sbbtn").hasClass("closer"))
{
$(".sbbtn").removeClass( "closer" ).addClass('opener');
}
$(".opener").click(function(){
$(this).removeClass( "opener" ).addClass('closer');
$(".sidebar").removeClass( "sbclose" ).addClass('sbopen');
$('.main').animate({width: '70%',margin:'0 0 0 30%'}, 100);
});
}
else {
if($(".sbbtn").hasClass("opener"))
{
$(".sbbtn").removeClass( "opener" ).addClass('closer');
}
$(".closer").click(function(){
$(this).removeClass( "closer" ).addClass('opener');
$(".sidebar").removeClass( "sbopen" ).addClass('sbclose');
});
} |
http://codepen.io/ |
|
27.08.2015, 23:08
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
anar1811,
в клике должно быть условие а не наоборот
<!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>
Последний раз редактировалось рони, 27.08.2015 в 23:11.
|
|
28.08.2015, 11:13
|
|
Интересующийся
|
|
Регистрация: 26.08.2012
Сообщений: 18
|
|
|
Сообщение от рони
|
аnar1811,
в клике должно быть условие а не наоборот
|
$(".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);
}
});
Так что-ли ? |
|
28.08.2015, 11:14
|
|
Интересующийся
|
|
Регистрация: 26.08.2012
Сообщений: 18
|
|
|
Спасибо за совет
|
|
28.08.2015, 11:56
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от anar1811
|
|
Так что-ли ?
|
если оно работает как вам нужно то так 
правда половина строк ненужна, но уже гораздо лучше. |
|
30.08.2015, 12:43
|
|
Интересующийся
|
|
Регистрация: 26.08.2012
Сообщений: 18
|
|
рони, не подскажешь как реализовать кукисы или хороший туториал?
$(".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);
}
});
|
|
30.08.2015, 12:50
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
|
|
30.08.2015, 16:07
|
|
Интересующийся
|
|
Регистрация: 26.08.2012
Сообщений: 18
|
|
$(".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);
}
});
так что-ли? НО ничего не берет из локал сторедж |
|
30.08.2015, 17:37
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
anar1811,
бред не пишите и будет брать
в клике только запоминание индекса кликнутого элемента. до клика код который откроет запомненный в прошлый раз элемент.
|
|
19.09.2015, 22:17
|
|
Интересующийся
|
|
Регистрация: 26.08.2012
Сообщений: 18
|
|
Спасибо,рони. Не знаю как,но написал. И что странно работает. А есть на русском материал для изучения, а то я не вник в суть работы скрипта. Методом тыка написал
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');
}
})
Последний раз редактировалось anar1811, 19.09.2015 в 22:19.
|
|
|
|
