Выпадающее меню работает не корректно
Есть три кнопки с выпадающим списком:
Календарь Формат мероприятия Название теплохода При нажатии на кнопку, выпадающий список пододвигает нижний блок на высоту списка. Все это реализовано тремя скриптами для каждой кнопки соответственно
//Кнопка "Формат мероприяти"
jQuery(document).ready(function(){
jQuery('#dd').click(function() {
if (jQuery('.calendar').height() < 300) {
jQuery('.calendar').animate({
height: 400
}, 500)
}
else {
jQuery('.calendar').animate({
height: 240
}, 500)
}
})
jQuery('body').not('#dd').click(function() {
jQuery('.calendar').animate({
height: 240
}, 500)
})
})
//Кнопка "Название теплохода"
jQuery(document).ready(function(){
jQuery('#ddd').click(function() {
if (jQuery('.calendar').height() < 300) {
jQuery('.calendar').animate({
height: 400
}, 500)
} else {
jQuery('.calendar').animate({
height: 240
}, 500)
}
})
jQuery('body').not('#ddd').click(function() {
jQuery('.calendar').animate({
height: 240
}, 500)
})
})
//Кнопка "Календарь"
jQuery(document).ready(function(){
jQuery('#d').click(function() {
if (jQuery('.calendar').height() < 300) {
jQuery('.calendar').animate({
height: 400
}, 500)
} else {
jQuery('.calendar').animate({
height: 240
}, 500)
}
})
jQuery('body').not('#d').click(function() {
jQuery('.calendar').animate({
height: 240
}, 500)
})
})
Проблема вот в чем. При нажатии двух кнопок одновременно блок под кнопками прыгает обратно вверх, а должен оставаться сдвинутым Как я понимаю, нужна какая-то проверка на то, открыт ли список. Но как это сделать? Посмотреть наглядно можно на тестовом сайте http://deltaunion2-001-site1.anytemp.../index.php/ru/ |
Хотя бы какие-то подсказки как это сделать?
|
Цитата:
|
ksa,
ну можно прямо на сайте в консоле. Или же как сделать так тестовый пример? Что имеется ввиду? |
Цитата:
Посмотри свежие темы - там и увидишь. Их можно запускать прямо в теме. |
ksa,
Нигде не увидела как это делается Но скинула в песочницу http://plnkr.co/edit/u9PCJF8PSAbeBTibbWjn?p=preview Хот почему-то в песочнице скрипты вообще не работают, при том что на сайте все работает |
TanyaRom,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
рони,
Так я как бы так и сделала. Весь код вставила в теги js |
TanyaRom,
ок - просто речь была о живом макете [HTML run] тут код код вашей страницы[/HTML] |
ksa,
HTML код <div class="content" id="content"> <div class="calendar"> <section id="ex1"> <jdoc:include type="modules" name="navig" /> <p class="pointer">ВЫБЕРИТЕ ИНТЕРЕСУЮЩИЙ ВАС РЕЙС</p> <div class="wrapper-demo"> <div id="d" class="wrapper-dropdown-6" tabindex="1">Календарь <div id="informer2" class="dropdown3"></div> </div> <div id="dd" class="wrapper-dropdown-3" tabindex="1"> <span>Формат мероприятия</span> <ul id="informer" class="dropdown"> <li><a href="#"><i class="icon-envelope icon-large"></i>Текст 1</a></li> <li><a href="#"><i class="icon-truck icon-large"></i>Текст 2</a></li> <li><a href="#"><i class="icon-plane icon-large"></i>Текст 3</a></li> </ul> </div> <div id="ddd" class="wrapper-dropdown-4" tabindex="1"> <span>Название теплохода</span> <ul id="informer1" class="dropdown1"> <li><a href="#"><i class="icon-envelope icon-large"></i>Текст 1</a></li> <li><a href="#"><i class="icon-truck icon-large"></i>Текст 2</a></li> <li><a href="#"><i class="icon-plane icon-large"></i>Текст 3</a></li> </ul> </div> <div class="choose"><button id="class5" class="class5">Выбрать</button></div> </div> </div> </section> </div>
function DropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.dropdown > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
jQuery(this).toggleClass('active');
return false;
});
obj.opts.on('click',function(){
var opt = jQuery(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}
jQuery(function() {
var dd = new DropDown( jQuery('#dd') );
jQuery(document).click(function() {
// all dropdowns
jQuery('.wrapper-dropdown-3').removeClass('active');
});
});
//ative1
function DropDown1(el) {
this.ddd = el;
this.placeholder = this.ddd.children('span');
this.opts = this.ddd.find('ul.dropdown1 > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown1.prototype = {
initEvents : function() {
var obj = this;
obj.ddd.on('click', function(event){
jQuery(this).toggleClass('active1');
return false;
});
obj.opts.on('click',function(){
var opt = jQuery(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}
jQuery(function() {
var dd = new DropDown1( jQuery('#ddd') );
jQuery(document).click(function() {
// all dropdowns
jQuery('.wrapper-dropdown-4').removeClass('active1');
});
});
//ative2
function DropDown2(el) {
this.dddd = el;
this.placeholder = this.dddd.children('span');
this.opts = this.dddd.find('ul.dropdown2 > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown2.prototype = {
initEvents : function() {
var obj = this;
obj.dddd.on('click', function(event){
jQuery(this).toggleClass('active2');
return false;
});
obj.opts.on('click',function(){
var opt = jQuery(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}
jQuery(function() {
var dddd = new DropDown2( jQuery('#dddd') );
jQuery(document).click(function() {
// all dropdowns
jQuery('.wrapper-dropdown-5').removeClass('active2');
});
});
//ative3
function DropDown3(el) {
this.d = el;
this.placeholder = this.d.children('span');
this.opts = this.d.find('ul.dropdown3 > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown3.prototype = {
initEvents : function() {
var obj = this;
obj.d.on('click', function(event){
jQuery(this).toggleClass('active3');
return false;
});
obj.opts.on('click',function(){
var opt = jQuery(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}
jQuery(function() {
var d = new DropDown3( jQuery('#d') );
jQuery(document).click(function() {
// all dropdowns
jQuery('.wrapper-dropdown-3').removeClass('active3');
});
});
//Кнопка "Формат мероприяти"
jQuery(document).ready(function(){
jQuery('#dd').click(function() {
if (jQuery('.calendar').height() < 300) {
jQuery('.calendar').animate({
height: 400
}, 500)
} else if (jQuery('.calendar').height() > 300) {
jQuery('.calendar').animate({
height: 400
}, 500)
}
else {
jQuery('.calendar').animate({
height: 240
}, 500)
}
})
jQuery('body').not('#dd').click(function() {
jQuery('.calendar').animate({
height: 240
}, 500)
})
})
//Кнопка "Название теплохода"
jQuery(document).ready(function(){
jQuery('#ddd').click(function() {
if (jQuery('.calendar').height() < 300) {
jQuery('.calendar').animate({
height: 400
}, 500)
} else if (jQuery('.calendar').height() > 300) {
jQuery('.calendar').animate({
height: 400
}, 500)
}
else {
jQuery('.calendar').animate({
height: 240
}, 500)
}
})
jQuery('body').not('#ddd').click(function() {
jQuery('.calendar').animate({
height: 240
}, 500)
})
})
//Кнопка "Календарь"
jQuery(document).ready(function(){
jQuery('#d').click(function() {
if (jQuery('.calendar').height() < 300) {
jQuery('.calendar').animate({
height: 400
}, 500)
} else if (jQuery('.calendar').height() > 300) {
jQuery('.calendar').animate({
height: 400
}, 500)
}
else {
jQuery('.calendar').animate({
height: 240
}, 500)
}
})
jQuery('body').not('#d').click(function() {
jQuery('.calendar').animate({
height: 240
}, 500)
})
})
|
| Часовой пояс GMT +3, время: 19:38. |