Javascript.RU

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

Помогите сделать так чтоб по клику открывалось и по клику же закрывалось
Помогите, прошу)
При клике на ссылку показывается определенный блок., но окрывается и сразу же закрывается. Помогите сделать так чтоб по клику открывалось и по клику же закрывалось или кнопку "свернуть" добавить.
<ul>
    <li><a href="#" class="link01">Click me 01</a></li>
    <li><a href="#" class="link02">Click me 02</a></li>
    <li><a href="#" class="link03">Click me 03</a></li>
  </ul>
  
  <div class="div01">Блок номер 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem expedita rerum ullam amet ipsam officiis voluptate dolores illo architecto unde omnis quia nesciunt harum a et cumque nam temporibus blanditiis.</div>
  <div class="div02">Блок номер 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore omnis id rem quas recusandae commodi fugit alias voluptatem ipsam adipisci. Illum voluptatibus minus earum odio sint nostrum itaque tenetur expedita!</div>
  <div class="div03">Блок номер 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi molestiae illum aut accusantium rerum et reprehenderit officiis distinctio dolor laboriosam. Quas adipisci quia corporis possimus voluptatem saepe maiores in suscipit.</div>

код CSS
div[class^=div]{
    width:400px;
    min-width: 400px;
  padding:10px;
  box-sizing:border-box;
  display: none;
}


$(function() {
    $('a[class^=link]').on('click', function () {
        function clear () {
            $('div[class^=div]').css({
                display : 'none'
            });
        }
        var $class = $(this).attr('class');
        if($class == 'link01'){
            clear();
            $('.div01').toggle('drop');
        } else if($class == 'link02'){
            clear();
            $('.div02').toggle('drop');
        } else if($class == 'link03'){
            clear();
            $('.div03').toggle('drop');
        };
    });
});



Есть еще вариант сделать этот текст всплывющим окном, так даже лучше будет.
Буду очень благодарен.
Ответить с цитированием
  #2 (permalink)  
Старый 25.10.2013, 16:11
Аватар для a_l
a_l a_l вне форума
Кандидат Javascript-наук
Отправить личное сообщение для a_l Посмотреть профиль Найти все сообщения от a_l
 
Регистрация: 15.09.2011
Сообщений: 143

$(function() {
  $('a[class^=link]').click(function() {
    $('.'+$(this).attr('class').replace('link','div')).toggle();
  });
});
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вопрос следующий, как сделать чтоб вытаскивало картинку с префиксом "1" Maxsl_89 Элементы интерфейса 1 14.10.2013 13:35
Обработка перетаскивания как нажатие. Помогите сделать aqwerty Элементы интерфейса 7 08.09.2011 14:51
как сделать так, чтоб браузер смог отличить знак больше от закрытия тэга? FirstFrost Общие вопросы Javascript 8 17.07.2010 22:55
Можно ли сделать так... Абум Общие вопросы Javascript 1 04.07.2009 18:49
Помогите сделать такое меню(( Lilith Я не знаю javascript 2 02.06.2009 02:31