Javascript.RU

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

Выпадающее меню
Доброго времени суток тем кто читает это.
Проблема следующая, не выпадает список при нажатии на кнопку,
вот html:
<div id="dd" class="wrapper-dropdown" tabindex="1">AAA
     <ul class="dropdown">
        <li><a href="#"><i class=""></i>123</a></li>
        <li><a href="#"><i class=""></i>123</a></li>
        <li><a href="#"><i class=""></i>123</a></li>
        <li><a href="#"><i class=""></i>123</a></li>
        <li><a href="#"><i class=""></i>...</a></li>
    </ul>
</div>

а вот код Javascrip:
obj.dd.on('click', function(event){
        $(this).toggleClass('active');
        return false;
    });
    
    function DropDown(el) {
        this.dd = el;
        this.initEvents();
    }
    DropDown.prototype = {
        initEvents : function() {
            var obj = this;
            
            obj.dd.on('click', function(event){
                $(this).toggleClass('active');
                event.stopPropagation();
            }); 
        }
    }
    
    $(function() {
        
        var dd = new DropDown( $('#dd') );
        
        $(document).click(function() {
            $('.wrapper-dropdown').removeClass('active');
        });
        
    });

Последний раз редактировалось GTRka, 07.08.2017 в 13:58.
Ответить с цитированием
  #2 (permalink)  
Старый 07.08.2017, 14:20
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,733

GTRka, строки 1-4 - "не пришей к п... рукав", т.е. непонятно зачем и почему они там.
Если до строки 1 переменная «obj» является экземпляром "класса" DropDown, то менюшка моментально разворачивается и сворачивается обратно.
Если переменная undefined, то смотрите консоль, там вас об этом браузер уведомит. В этом случае у вас код вообще работать не будет.
Ответить с цитированием
  #3 (permalink)  
Старый 07.08.2017, 15:49
Новичок на форуме
Отправить личное сообщение для GTRka Посмотреть профиль Найти все сообщения от GTRka
 
Регистрация: 07.08.2017
Сообщений: 7

Nexus,
Спасибо за ответ!)
Но ничего не выходит(((
я немного изменил код на:
$(function() {

    var dd = new DropDown( $('#dd') );
 
    $(document).click(function() {
        $('.wrapper-dropdown').removeClass('active');
    });
	function DropDown(el) {
    this.dd = el;
    this.initEvents();
}
DropDown.prototype = {
    initEvents : function() {
        var obj = this;
 
        obj.dd.on('click', function(event){
            $(this).toggleClass('active');
            event.stopPropagation();
        }); 
    }
}

});

Не ошибок в консоли, ничего... Помогите плиз)
Я новичок в этом(
В консоли при нажатии на кнопки появляется wrapper-dropdown active , но списка нету((

Последний раз редактировалось GTRka, 07.08.2017 в 15:56.
Ответить с цитированием
  #4 (permalink)  
Старый 07.08.2017, 16:00
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,733

GTRka, в консоли как минимум должно быть уведомление, о том, что в строке 10 вызывается не объявленный метод.
Вы вызываете метод "класса" до того, как внести его в прототип.

Строку 3 перенесите на строку 22.
Ответить с цитированием
  #5 (permalink)  
Старый 07.08.2017, 16:08
Новичок на форуме
Отправить личное сообщение для GTRka Посмотреть профиль Найти все сообщения от GTRka
 
Регистрация: 07.08.2017
Сообщений: 7

Nexus,Спасибо большое!)))
У меня немного в другом еще ошибка была, вот и ничего не получалось
Ответить с цитированием
  #6 (permalink)  
Старый 07.08.2017, 17:30
Новичок на форуме
Отправить личное сообщение для GTRka Посмотреть профиль Найти все сообщения от GTRka
 
Регистрация: 07.08.2017
Сообщений: 7

Nexus,
Еще 1 вопрос, а как сделать так что бы при выпадении списка затемнялся задний фон?)
Ответить с цитированием
  #7 (permalink)  
Старый 07.08.2017, 18:51
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,733

GTRka, добавить на страницу полупрозрачный слой поверх всего контента, который будет появляться, когда меню открыто.
Само меню придется заставить появляться поверх этого полупрозрачного слоя (position + z-index).
Вообще это лишний, никому не нужный геморой.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
css выпадающее меню Digo (X)HTML/CSS 5 27.03.2017 17:11
Выпадающее меню (костыли) Sk1LL Общие вопросы Javascript 4 06.02.2016 12:47
Замена стилей класса Павел Турченко Элементы интерфейса 9 30.10.2015 15:24
Бесконечноуровневое меню на CSS ruslan_mart Ваши сайты и скрипты 5 12.01.2015 20:59
Находится ли мышка над дивом ? (выпадающее меню) advsm jQuery 31 24.09.2014 17:50