Развернуть / Свернуть Div

Question

Я пытаюсь создать две кнопки, одна из которых будет расширять div, а другая - его сворачивать.Я пытался изменить этот код, но я не могу заставить его работать.Я думаю, я просто не понимаю, как не переключать ссылку.

Я также пытаюсь заставить DIV появляться при загрузке страницы.Я даже не уверен, возможно ли это при написании кода.

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

http://jsfiddle.net/XUjAH/93/

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

  $('#click-meopen').click(function() {
    var height = $("#this").height();
    if( height > 0 ) {
        $('#this').css('height','0');
    } else {
        $("#this").css({'position':'absolute','visibility':'hidden','height':'auto'});
        var newHeight = $("#this").height();
        $("#this").css({'position':'static','visibility':'visible','height':'0'});
        $('#this').css('height',newHeight + 'px');
    }
});

$('#click-meclose').click(function() {
    var height = $("#this").height();
    if( height > 0 ) {
        $('#this').css('height','0');
    } else {
        $("#this").css({'position':'absolute','visibility':'hidden','height':'auto'});
        var newHeight = $("#this").height();
        $("#this").css({'position':'static','visibility':'visible','height':'0'});
        $('#this').css('height',newHeight + 'px');
    }
});

Answer 1

Весь следующий текст просто ИМХО:)

Смотрите мой пример здесь - http://jsfiddle.net/XUjAH/99/

HTML:

<p id="click-meopen">click me to open</p>
<p id="click-meclose">click me to close</p>
<div id="this">
    <div id="content">here<br />is<br />a<br />bunch<br />of<br />content<br />sdf</div>
</div>

как для JS:

$('#click-meopen').click(function() {
    $("#this").height($("#content").height());

});
$('#click-meopen').click();

$('#click-meclose').click(function() {
    $("#this").height('0');
});​

Что касается CSS, он должен быть таким же, как у вас.

UPD : кажется, что анимация немного нестабильна - при установке 'height: auto' - div виден с самого начала, однако кнопка закрытия игнорирует анимацию при первом нажатии (у меня Chrome с последним обновлением ) поэтому я добавил обходной путь. Также добавлены другие стили для поддержки этой анимации для других браузеров, таких как Firefox и Opera, и не только для тех, кто поддерживает -webkit.

http://jsfiddle.net/XUjAH/110/

в CSS добавлен класс и удален «переход» из основного стиля:

.with-animation {
    -webkit-transition: height 1s ease-in-out;
    -moz-transition: height 1s ease-in-out;
    -o-transition: height 1s ease-in-out;
    transition: height 1s ease-in-out;
}

в JS: // Однако наш div уже имеет правильный размер этой строки // предотвращает мгновенное закрытие при первом нажатии, не знаю почему . $ ( "# Контейнер") высота (. $ ( "# Содержание") высота ());

$('#click-meopen').click(function() {
    $("#container").height($("#content").height()); 
});

$('#click-meclose').click(function() {
    // If we add class with-animation on upper level div will
    // start animation on page load
    $("#container").height('0').addClass("with-animation");
});

1027 *

Answer 2

    $('#click-meopen').click(function() {
        $("#this").css({'position':'absolute','visibility':'hidden','height':'auto'});
        var newHeight = $("#this").height();
        $("#this").css({'position':'static','visibility':'visible','height':'0'});
        $('#this').css('height',newHeight + 'px');
    });

    $('#click-meclose').click(function() {
        $('#this').css('height','0');
    });

    $('#click-meopen').click();

http://jsfiddle.net/XUjAH/100/

Answer 3

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

Есть два способа, которые я могу предложить, один - простопросто добавьте -moz-transition: height 1s ease-in-out; и transition: height 1s ease-in-out;, чтобы сделать это с css3, но это не поможет в более старых браузерах, т.е. браузерах.

Другой способ - поместить div внутри вашего текста в div, который вы хотите свернуть:

<div id="this">
    <div id="height">
         text
         text
     </div>
</div>

тогда в вашем javascript вы можете получить высоту внутреннего элемента div, и таким образом вы можете использовать animate вместо height: auto.

$('#click-meopen').click(function() {
    $('#this').animate({'height': $('#height').height()}, 1000);
});

$('#click-meclose').click(function() {
    $('#this').animate({'height': 0}, 1000);
});

этого должно быть достаточнодля вас.

Answer 4

$('#click-meopen').click(function() {
    $('#this').show();
});

$('#click-meclose').click(function() {
    $('#this').hide();
});​

http://jsfiddle.net/XUjAH/95/

Или с переключателем

$('#click-meopen').click(function() {
    $('#this').toggle();
});

http://jsfiddle.net/XUjAH/96/

Answer 5

Вы пытаетесь изменить это на кнопки?

<input type="submit" id="click-meopen" value="open"></input>
<input type="submit" id="click-meclose" value="close"></input>
<div id="this">here<br />is<br />a<br />bunch<br />of<br />content<br />sdf</div>

Это не сложно сделать.

Я бы также порекомендовал вам использовать .toggle() или .show(),.hide() методы jQuery. Установка свойства css height на ноль не является хорошей практикой.

Хотите показать div, когда страница загружается или когда она закончила загрузку (DOM готов)?

Ваш код JavaScript будет:

$('#click-meopen').click(function() {
    $('#this').show(); // or .toggle()
});

$('#click-meclose').click(function() {
    $('#this').hide(); // or .toggle()
});​

Если вы используете только одну кнопку, вам следует использовать метод .toggle(), в противном случае используйте метод .show(),.hide()!

Когда DOM готов (Страница загружена полностью):

$(document).ready(function(){
     $('#this').show();
});

документация об используемых методах:

• http://api.jquery.com/show/
• http://api.jquery.com/hide/
• http://api.jquery.com/toggle-event/
• http://api.jquery.com/ready/

Answer 6

Если вы можете использовать toggle, тогда все, что вам нужно, это $("#this").toggle('slow');, но вы должны заменить height: 0; на display: none;