проблема jquery с slidetoggle ()

0

У меня есть div #up и div #middle как внутри div #frame

с помощью css:

#frame{
    position: absolute;
    left:200;
    top:200;
    border-style: solid;
    border-width: 1px;
}

#middle{
    width:200px;
    height:200px;

}

#up{
    position:absolute;
    bottom:200;
    display:none;
}

Когда я нажимаю на #middle, я нахожусь в слайде # up снизу вверх с кодом jQuery:

$('#middle').click(function () {
    $('#up').slideToggle();
});

здесь jsFiddle: http://jsfiddle.net/malamine_kebe/DCSuR/

мой вопрос: как я могу также перетащить верхнюю границу рамки #frame, когда #up является slideToggling

Теги:
slidetoggle

4 ответа

2
Лучший ответ

ОБНОВЛЕНО FIDDLE

Вы не можете переключать границу элемента с внутренним div, который имеет position: absolute;

Посмотрите на демонстрацию, я добавил границу к #up со всех сторон, кроме нижнего, и сделаю этот div переопределив родительский (#middle) с bottom: 201px;

UPDATE 2: Я не уверен, что если вам нужна вкладка эффект, как это

или как @Danko сделал ссылку

Поделиться
  • 1
    +1 Ваш подход хорош, только несколько свойств, чтобы подделать его jsfiddle.net/DCSuR/21
  • 1
    О, просто хотел сделать еще один пример с полной шириной #up, почти такой же, как вы сделали :)
Показать ещё 8 комментариев
1

Я просто проблема с CSS. Когда вы используете position: absolute элемент может выйти наружу без изменения родительского кадра. Поэтому, если вы перейдете на position: relative она будет работать.

#up{
    position:relative;
    top: 0;
    display:none;
}

Обновленный скрипт

Поделиться
  • 3
    Я не думаю, что OP хочет, чтобы средний div был сдвинут вниз. Я полагаю, что он хочет, чтобы он оставался на месте, поднимаясь вверх вместе с границей контейнера div.
  • 0
    спасибо @ L105 но да, я не хочу, чтобы средний div был сдвинут
1

Думаю, это может быть что-то...

var i = 0;
$('#middle').click(function () {
    var tp = i % 2 === 0 ? $(this).offset().top - $('#up').height() : $(this).offset().top - 2;
    $('#frame').animate({
        top: tp
    });
    $('#up').slideToggle();
    i++;
});

FIDDLE

Поделиться
-1

Проверьте, отвечает ли это на ваш вопрос. ОБНОВЛЕНИЕ JAVASCRIPT

$('#middle').click(function () {
    $('#up').slideToggle(function(){
      $('#frame').css("borderTop","2px solid #000");  
    });
});

И ОБНОВЛЕНИЕ CSS

#up{
    position:absolute;
    bottom:200px;
    display:none;
    border-top: 2px solid black;
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню