Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.10.2015, 12:05
Интересующийся
Отправить личное сообщение для TanyaRom Посмотреть профиль Найти все сообщения от TanyaRom
 
Регистрация: 02.09.2015
Сообщений: 23

Выпадающее меню работает не корректно
Есть три кнопки с выпадающим списком:
Календарь
Формат мероприятия
Название теплохода

При нажатии на кнопку, выпадающий список пододвигает нижний блок на высоту списка.
Все это реализовано тремя скриптами для каждой кнопки соответственно

//Кнопка "Формат мероприяти"
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/

Последний раз редактировалось TanyaRom, 08.10.2015 в 15:23.
Ответить с цитированием
  #2 (permalink)  
Старый 08.10.2015, 14:29
Интересующийся
Отправить личное сообщение для TanyaRom Посмотреть профиль Найти все сообщения от TanyaRom
 
Регистрация: 02.09.2015
Сообщений: 23

Хотя бы какие-то подсказки как это сделать?
Ответить с цитированием
  #3 (permalink)  
Старый 08.10.2015, 14:38
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от TanyaRom
Хотя бы какие-то подсказки как это сделать?
Для этого нужен тестовый пример, который можно запустить прямо тут...
Ответить с цитированием
  #4 (permalink)  
Старый 08.10.2015, 14:47
Интересующийся
Отправить личное сообщение для TanyaRom Посмотреть профиль Найти все сообщения от TanyaRom
 
Регистрация: 02.09.2015
Сообщений: 23

ksa,
ну можно прямо на сайте в консоле.
Или же как сделать так тестовый пример? Что имеется ввиду?
Ответить с цитированием
  #5 (permalink)  
Старый 08.10.2015, 15:03
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от TanyaRom
как сделать так тестовый пример?
Тут на форуме мы их выкладываем пачками!
Посмотри свежие темы - там и увидишь. Их можно запускать прямо в теме.
Ответить с цитированием
  #6 (permalink)  
Старый 08.10.2015, 15:15
Интересующийся
Отправить личное сообщение для TanyaRom Посмотреть профиль Найти все сообщения от TanyaRom
 
Регистрация: 02.09.2015
Сообщений: 23

ksa,
Нигде не увидела как это делается
Но скинула в песочницу
http://plnkr.co/edit/u9PCJF8PSAbeBTibbWjn?p=preview
Хот почему-то в песочнице скрипты вообще не работают, при том что на сайте все работает
Ответить с цитированием
  #7 (permalink)  
Старый 08.10.2015, 15:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

TanyaRom,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #8 (permalink)  
Старый 08.10.2015, 15:21
Интересующийся
Отправить личное сообщение для TanyaRom Посмотреть профиль Найти все сообщения от TanyaRom
 
Регистрация: 02.09.2015
Сообщений: 23

рони,
Так я как бы так и сделала. Весь код вставила в теги js
Ответить с цитированием
  #9 (permalink)  
Старый 08.10.2015, 15:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

TanyaRom,
ок - просто речь была о живом макете
[HTML  run] тут  код код вашей страницы[/HTML]
Ответить с цитированием
  #10 (permalink)  
Старый 08.10.2015, 16:11
Интересующийся
Отправить личное сообщение для TanyaRom Посмотреть профиль Найти все сообщения от TanyaRom
 
Регистрация: 02.09.2015
Сообщений: 23

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)
        })
	
})
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Находится ли мышка над дивом ? (выпадающее меню) advsm jQuery 31 24.09.2014 17:50
Выпадающее меню на JS (подкатегории) Trueplayer Events/DOM/Window 5 18.09.2014 22:29
скрипт работает только на последнем пункте меню walking Элементы интерфейса 0 08.01.2012 14:56
Выпадающее меню не работает в Chrome Bangoo jQuery 1 21.03.2011 20:33
Проблема с меню не корректно отображается в браузерах отличных от IE (т.е. FF Opera) 3xv Элементы интерфейса 2 16.04.2009 19:51