Javascript.RU

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

Появление/исчезновение дива при клике на ссылку
Есть ссылка
<a href="#">меню</a>


Нужно чтобы при клике на нее появлялся блок. При этом ссылка должна получить класс active. При повторном клике на ссылку, или при клике на body блок должен исчезнуть.

Проект работает с jquery. Так что его использование допускается. Сам решить не могу, т.к. работаю в графических редакторах) Хочется простое и элегантное решение. Заранее признателен!
Ответить с цитированием
  #2 (permalink)  
Старый 04.02.2013, 14:23
Профессор
Отправить личное сообщение для Hoshinokoe Посмотреть профиль Найти все сообщения от Hoshinokoe
 
Регистрация: 08.01.2012
Сообщений: 253

nickostyle,
<a id="link1" href="#">Click me</a>
<div id="content1" style="display: none;">Content should be here!</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('a#link1').click(function (e) {
            $(this).toggleClass('active');
            $('#content1').toggle();
                
            e.stopPropagation();
        });

        $('body').click(function () {
            var link = $('a#link1');
            if (link.hasClass('active')) {
                link.click();
            }
        });
    });

</script>
Ответить с цитированием
  #3 (permalink)  
Старый 04.02.2013, 20:23
Новичок на форуме
Отправить личное сообщение для nickostyle Посмотреть профиль Найти все сообщения от nickostyle
 
Регистрация: 04.02.2013
Сообщений: 2

большое спасибо вам! Работает на отлично. Если несложно, не подскажете, что добавить, чтобы блок не исчезал при клике на него ?
Ответить с цитированием
  #4 (permalink)  
Старый 04.02.2013, 20:28
Профессор
Отправить личное сообщение для Hoshinokoe Посмотреть профиль Найти все сообщения от Hoshinokoe
 
Регистрация: 08.01.2012
Сообщений: 253

nickostyle,

$(document).ready(function () {
        $('a#link1').click(function (e) {
            $(this).toggleClass('active');
            $('#content1').toggle();
                
            e.stopPropagation();
        });

        $('#content1').click(function (e) {
            e.stopPropagation();
        });

        $('body').click(function () {
            var link = $('a#link1');
            if (link.hasClass('active')) {
                link.click();
            }
        });
    });
Ответить с цитированием
  #5 (permalink)  
Старый 02.05.2013, 16:40
Новичок на форуме
Отправить личное сообщение для bullshmaiser Посмотреть профиль Найти все сообщения от bullshmaiser
 
Регистрация: 02.05.2013
Сообщений: 1

а как сделать чтоб появившийся див исчезал, если убрать мышь, а не кликать повторно?
Ответить с цитированием
  #6 (permalink)  
Старый 18.01.2016, 02:03
Аватар для alex72bel
Аспирант
Отправить личное сообщение для alex72bel Посмотреть профиль Найти все сообщения от alex72bel
 
Регистрация: 29.12.2012
Сообщений: 60

Hoshinokoe,
Подскажите как сделать так, чтобы блок например при клике выскакивал не вниз а вверх?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Запись cookes при клике pavdin Общие вопросы Javascript 3 06.02.2012 15:19
При наведении на ссылку меняется картинка ucoz (jquery) pelimeshki jQuery 2 12.01.2012 23:53
обновление окошка с сообщением при клике sarkis AJAX и COMET 3 10.01.2012 22:06
При клике в любом месте документа должен удаляться определенный id DorianLeroy jQuery 2 24.12.2011 20:05
Смена картинки (бекграунд дива ) при событии (нажатие клавиш или клавиши и мыши) Monster Events/DOM/Window 5 01.11.2009 00:16