Как создать скользящий DIV по щелчку?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я хочу создать выдвижной DIV, подобный тому, что здесь, когда вы нажимаете «Контакт». Кто-нибудь знает что-нибудь подобное этому?

Ответ №1:

Использование метода jQuery slideToggle() может помочь вам сделать это.

Пример

HTML:

 <div id="contact">
    Contact me!
</div>
<a href="#" id="toggle">Contact</a>

CSS:

 #contact
{
    display: none;
    background: grey;
    color: #FFF;
    padding: 10px;
}

JavaScript:

 $(function()
{
     $("a#toggle").click(function()
     {
         $("#contact").slideToggle();
         return false;
     }); 
});

1. Могу ли я изменить скорость с помощью этого?

2. @EarlLarson: Если вы прочитаете страницу документации, на которую я ссылался, вы заметите, что slideToggle первым параметром является длительность .

3. О, хаха, я слепой! Большое спасибо, это было так просто!

Ответ №2:

Если вы не хотите использовать jQuery и предпочитаете современные браузеры, вы можете попробовать:

Демонстрация: http://jsfiddle.net/ThinkingStiff/EVyE8

HTML:

 <div id="slide">click me</div>

CSS:

 #slide {
    height: 50px;
    transition:             height 500ms ease;
        -moz-transition:    height 500ms ease;
        -ms-transition:     height 500ms ease;
        -o-transition:      height 500ms ease;
        -webkit-transition: height 500ms ease;
}

Скрипт:

 document.getElementById( 'slide' ).addEventListener( 'click', function() {

    this.style.height == '50px' || this.style.height == ''
        ? this.style.height = '150px' 
        : this.style.height = '50px';

}, false );

Ответ №3:

еще один пример, но без jquery и с подходом добавления / удаления классов 🙂

Демонстрация: http://jsfiddle.net/1wbh8pqj

Основная идея заключается в том, что у вас есть два класса, один из которых применяется к слайдеру, а другой указывает, как слайдер должен отображаться при его расширении.

 .slider {
    height: 0px;
    overflow: hidden;

    transition:         height 0.5s ease;
    -moz-transition:    height 0.5s ease;
    -ms-transition:     height 0.5s ease;
    -o-transition:      height 0.5s ease;
    -webkit-transition: height 0.5s ease;
}

.slided {
    height: 100px;
}

итак, вы должны установить класс ‘slided’ в качестве слайдера, когда он должен быть расширен, и удалить его, когда слайдер должен быть уменьшен, и с помощью супер-мега-потрясающего css-перехода высота будет плавно меняться 🙂

 var expander = document.getElementById("expander");

expander.addEventListener("click", function () {
 var slider = document.getElementsByClassName("slider")[0];

  if (slider.classList.contains("slided")) {
    slider.classList.remove("slided");
  } else {
    slider.classList.add("slided");
  }

});

ohbtw, html:

 <div class="slider">i am teh slidah!! :D</div>
<div class="content">and i am the content XD</div>
<div id="expander">click me to expand/hide the slidah! :O</div>

Ответ №4:

Другой пример

Пример

http://jsfiddle.net/9cdYR/

HTML

 <div id="slide">
    Slide content<br />
    Slide content<br />
    Slide content<br />
    </div>
<div id="content">
    Content<br />
    Content<br />
    Content<br />
</div>

<button id="slide_button">Slide it</button>

CSS

 #content {
    background-color: #c0c0c0;
    border: 1px solid blue;
}

#slide {
    border: 1px solid red;
    background-color: #000;
    color: #fff;
    overflow: hidden;
}

JS

 $('#slide_button').click(function() {
    $('#slide').animate({
        height: 'toggle'
    }, 1500, function() {
    });
});

Ответ №5:

С помощью jQuery вы создаете div и добавляете display: none с помощью css. Затем, что-то вроде:

 $('.button').click(function(e){
  e.preventDefault();
  $('#mydiv').slideToggle();
});

Ответ №6:

Всемогущий jQuery снова приходит на помощь.

Если вы не хотите использовать jquery, просто установите таймер и увеличьте высоту.