Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Помогите сделать так чтоб по клику открывалось и по клику же закрывалось (https://javascript.ru/forum/dom-window/42422-pomogite-sdelat-tak-chtob-po-kliku-otkryvalos-i-po-kliku-zhe-zakryvalos.html)

Maxsl_89 25.10.2013 15:18

Помогите сделать так чтоб по клику открывалось и по клику же закрывалось
 
Помогите, прошу)
При клике на ссылку показывается определенный блок., но окрывается и сразу же закрывается. Помогите сделать так чтоб по клику открывалось и по клику же закрывалось или кнопку "свернуть" добавить.
<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');
        };
    });
});



Есть еще вариант сделать этот текст всплывющим окном, так даже лучше будет.
Буду очень благодарен.

a_l 25.10.2013 16:11

$(function() {
  $('a[class^=link]').click(function() {
    $('.'+$(this).attr('class').replace('link','div')).toggle();
  });
});


Часовой пояс GMT +3, время: 14:26.