Javascript.RU

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

Всплывающие окна user и cart
Многим это покажется элементарным, но меня озадачил этот вопрос. Задача следующая: имеются два похожих окна, которые открываются по клику на картинку - User(окно ввода имени пользователя) и Cart(окно корзины). Необходимо сделать так, чтобы при открытом окне User по клику на кнопку открытия окна Cart окно User автоматически закрывалось. На данный момент окна закрываются только при повторном клике на иконку того или иного окна.

Код HTML одного из окон(второе имеет схожий код):
<div class="header-cart header-dropdown">
							<ul class="header-cart-wrapitem">
								<li class="header-cart-item">
									<div class="header-cart-item-img">
										<img src="images/item-cart-01.jpg" alt="IMG">
									</div>

									<div class="header-cart-item-txt">
										<a href="#" class="header-cart-item-name">
											White Shirt With Pleat Detail Back
										</a>

										<span class="header-cart-item-info">
											1 x $19.00
										</span>
									</div>
								</li>

								<li class="header-cart-item">
									<div class="header-cart-item-img">
										<img src="images/item-cart-02.jpg" alt="IMG">
									</div>

									<div class="header-cart-item-txt">
										<a href="#" class="header-cart-item-name">
											Converse All Star Hi Black Canvas
										</a>

										<span class="header-cart-item-info">
											1 x $39.00
										</span>
									</div>
								</li>

								<li class="header-cart-item">
									<div class="header-cart-item-img">
										<img src="images/item-cart-03.jpg" alt="IMG">
									</div>

									<div class="header-cart-item-txt">
										<a href="#" class="header-cart-item-name">
											Nixon Porter Leather Watch In Tan
										</a>

										<span class="header-cart-item-info">
											1 x $17.00
										</span>
									</div>
								</li>
							</ul>

							<div class="header-cart-total">
								Total: $75.00
							</div>

							<div class="header-cart-buttons">
								<div class="header-cart-wrapbtn">
									<!-- Button -->
									<a href="cart.html" class="flex-c-m size1 bg1 bo-rad-20 hov7 s-text21 trans-0-4">
										Открыть корзину
									</a>
								</div>

								<div class="header-cart-wrapbtn">
									<!-- Button -->
									<a href="#" class="flex-c-m size1 bg1 bo-rad-20 hov7 s-text21 trans-0-4">
										Оформить заказ
									</a>
								</div>
							</div>
						</div>
					</div>


Код JS:

$('.js-show-header-dropdown').on('click', function(){
        $(this).parent().find('.header-dropdown')
    });

    var menu = $('.js-show-header-dropdown');
    var sub_menu_is_showed = -1;

    for(var i=0; i<menu.length; i++){
        $(menu[i]).on('click', function(){ 
            
                if(jQuery.inArray( this, menu ) == sub_menu_is_showed){
                    $(this).parent().find('.header-dropdown').toggleClass('show-header-dropdown');
                    sub_menu_is_showed = -1;
                }
                else {
                    for (var i = 0; i < menu.length; i++) {
                        $(menu[i]).parent().find('.header-dropdown').removeClass("show-header-dropdown");
                    }

                    $(this).parent().find('.header-dropdown').toggleClass('show-header-dropdown');
                    sub_menu_is_showed = jQuery.inArray( this, menu );
                }
        });
    }

    $(".js-show-header-dropdown, .header-dropdown").click(function(event){
        event.stopPropagation();
    });

    $(window).on("click", function(){
        for (var i = 0; i < menu.length; i++) {
            $(menu[i]).parent().find('.header-dropdown').removeClass("show-header-dropdown");
        }
        sub_menu_is_showed = -1;
    });

Последний раз редактировалось DenisNetbay, 11.02.2019 в 18:42.
Ответить с цитированием
  #2 (permalink)  
Старый 11.02.2019, 12:07
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,791

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

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

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 11.02.2019, 18:43
Новичок на форуме
Отправить личное сообщение для DenisNetbay Посмотреть профиль Найти все сообщения от DenisNetbay
 
Регистрация: 11.02.2019
Сообщений: 2

Я тут совсем новенький Благодарю Вас, применил форматирование, теперь код более читаемый)
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Рандомные всплывающие окна при заходе на сайт MrNix21 Работа 27 24.06.2015 17:15
Сортировка много мерного массива по различным полям Telnet Events/DOM/Window 4 22.03.2015 01:56
Требуется помощь dima*** Общие вопросы Javascript 14 22.03.2015 01:24
Всплывающие окна в контакте Михаил1 Элементы интерфейса 2 25.02.2012 22:26
Firefox 5. Перестали работать всплывающие окна mikel Общие вопросы Javascript 3 24.06.2011 13:36