Div скользит сверху нижнего колонтитула при нажатии на другой div

У меня проблемы со скольжением div снизу страницы.

Вот мой JSFIDDLE

Когда я нажимаю на синее поле (стрелка-наведение), div скользит вверх (основное поле).

Но чтобы снова скрыть div (box-main), мне нужно щелкнуть внутри основного блока div.

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

А также я использовал фиксированную позицию для обоих полей, поэтому, когда я увеличиваю страницу, поле фиксируется и скрывает остальную часть страницы. Если я задаю абсолютную или относительную позицию, Div (box-main) виден под нижним колонтитулом, что выглядит не очень красиво. Есть ли другой способ сделать это.

вот мой код

HTML:

 <div id="container">
<div id="box-main"></div>
<div id="arrow-hover"></div>
    <footer></footer>
</div>

CSS:

    #container
{
    margin:0;
    width:100%;
    height:100%;
}

#box-main{
    position: fixed;
    left:150px;
    bottom: -150px;
    width: 250px;
    height: 150px;
    background: #000;
    z-index: 100;
}
#arrow-hover{
    position: fixed;
    bottom: 50px;
    left: 250px;
    width: 50px;
    height: 50px;
    background: blue;
    z-index: 100;

}
footer
{
    width:100%;
    background:green;
    height:50px;
    bottom:0;
    left:0;
    position:absolute;
    z-index:500;
}

Jquery:

 $('body').on('click','#arrow-hover',function(){
    $('#arrow-hover').animate({
        bottom: '200px'
    },250);
    $('#box-main').animate({
        bottom: '50px'
    },250);
});



$('body').on('click','#box-main',function(){
    $('#arrow-hover').animate({
        bottom: '50px'
    },250);
    $('#box-main').animate({
        bottom: '-150px'
    },250);
});

А также я хочу поместить стрелку вверх в (стрелка-наведение) div, чтобы при нажатии div перемещался вверх, а затем стрелка должна быть вниз, поэтому при повторном нажатии div скрывается. Есть ли способ сделать это в Jquery, javascript или css3.

Любая помощь будет оценена по достоинству, большое спасибо.


javascript html jquery css
person shyam selvan    schedule 27.11.2014    source источник

Ответы (3)


arrow_upward
2
arrow_downward

поскольку я не полагаюсь на переменные, я просто добавил класс в ваше основное поле: "видимый"

этот класс переключается в обеих анимациях, поэтому он устанавливается, когда вы его показываете, и удаляется, когда вы его скрываете:

обновление: чтобы включить несколько стрелок в кликабельный div, мы добавляем класс "стрелка вверх" к элементу #arrow-hover в html:

<div id="container">
  <div id="box-main"></div>
  <div id="arrow-hover" class"arrow-up"></div>
  <footer></footer>
</div>

затем мы добавляем функцию toggleClass в ваш обработчик щелчка при наведении курсора, чтобы переключаться между классом со стрелкой вверх и стрелкой вниз

$('body').on('click','#arrow-hover',function(){
if($('#box-main').hasClass("visible"))
{
    $('#arrow-hover').animate({
        bottom: '50px'
    },250).toggleClass("arrow-up arrow-down");
    $('#box-main').animate({
        bottom: '-150px'
    },250).toggleClass("visible");
}else
{ 
    $('#arrow-hover').animate({
        bottom: '200px'
    },250).toggleClass("arrow-up arrow-down");
    $('#box-main').animate({
        bottom: '50px'
    },250).toggleClass("visible");
}
});

все, что вам нужно сделать сейчас, это определить классы со стрелками вверх и вниз в вашем css и установить фоновое изображение.

для этих целей я использую иконочный шрифт "font awesome" http://jsfiddle.net/hapttwf6/28/ --> вот как это выглядит ;)

person errand    schedule 27.11.2014
comment
Большое спасибо, есть ли способ дать переход стрелок в кликабельном div, вверх, когда слайд движется вверх и вниз, когда движется вниз.... - person shyam selvan; 27.11.2014

arrow_upward
2
arrow_downward

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

Посмотреть обновленную скрипту

var clicked = false;

$('body').on('click','#arrow-hover',function(){
    if(!clicked){
        $('#arrow-hover').animate({
            bottom: '200px'
        },250);
        $('#box-main').animate({
            bottom: '50px'
        },250);
        clicked = true;
    }
    else{
        $('#arrow-hover').animate({
            bottom: '50px'
        },250);
        $('#box-main').animate({
            bottom: '-150px'
        },250);
        clicked = false;
    }
});

Надеюсь это поможет.

person MysticMagicϡ    schedule 27.11.2014
comment
большое спасибо ... есть ли способ дать переход стрелок в кликабельном div, вверх, когда слайд движется вверх и вниз, когда движется вниз.... - person shyam selvan; 27.11.2014

arrow_upward
1
arrow_downward

см. мою обновленную скрипку:

$('body').on('click','#arrow-hover',function(){
    $('#arrow-hover').animate({
        bottom: '200px'
    },250);
      $('#box-main').animate({
        bottom: '50px'
    },250);
    if($('#arrow-hover').css('bottom')!='50px'){
    $('#arrow-hover').animate({
        bottom: '50px'
    },250);
        $('#box-main').animate({
        bottom: '-150px'
    },250);
    }
});
#container
{
    margin:0;
    width:100%;
    height:100%;
}

#box-main{
    position: fixed;
    left:150px;
    bottom: -150px;
    width: 250px;
    height: 150px;
    background: #000;
    z-index: 100;
}
#arrow-hover{
    position: fixed;
    bottom: 50px;
    left: 250px;
    width: 50px;
    height: 50px;
    background: blue;
    z-index: 100;

}
footer
{
    width:100%;
    background:green;
    height:50px;
    bottom:0;
    left:0;
    position:absolute;
    z-index:500;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
<div id="box-main"></div>
<div id="arrow-hover"></div>
    <footer></footer>
</div>

http://jsfiddle.net/hapttwf6/27/

person Innodel    schedule 27.11.2014