1
$("#panel-click").click(function(){
    if($("#panel-click>.arrow").length==0){
        $("#panel-click>div").addClass("arrow");
        $("#panel-click").addClass("rotate");
        $('#panel').toggleClass('toggled');
    }else{
        $("#panel-click>div").removeClass("arrow");
        $("#panel-click").removeClass("rotate");
        $('#panel').removeClass('toggled');
    }
});
$("#panel").hover(function(){
    if($("#panel-click>.arrow").length==0){
        $("#panel-click>div").addClass("arrow");
        $("#panel-click").addClass("rotate");
    }else{
        $("#panel-click>div").removeClass("arrow");
        $("#panel-click").removeClass("rotate");
    }
});

panel-click - это анимированная иконка меню (hamburger). При нажатии на иконку #panel-click происходит ее анимация (анимируется в стрелку) и открывается блок #panel. При повторном нажатии на иконку #panel-click она возвращается в исходное положение и блок #panel закрывается. Помогите, пожалуйста, сделать чтобы блок #panel закрывался не только при нажатии на иконку #panel-click, но и при наведении на сам блок #panel, и при этом иконка #panel-click возвращалась в исходное положение. Спасибо!

1
  • весь код с html сюда. 22 фев 2016 в 9:33

2 ответа 2

1

$(document).ready(function(){
    $("#hide").hover(function(){
        $(".div").hide();
    });
});
.div{
  width:300px;
  height:300px;
  border:1px solid #999;
  margin:10px auto;
  position:relative;
}
#hide{
  position:absolute;
  right:0; top:0;
  width:20px;
  text-align:center;
  height:20px;
  line-height:20px;
  
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="div"> 
<div id="hide"> X </div>
</div>

вот так - самый простой способ , пример на фидле

0

Если я правильно понял вопрос, то тебе нужно нечто подобное:

// событие только по наведению
$("#panel").mouseout(function(){
  // только если у панели есть класс 'toggled'
  if ($(this).hasClass('toggled')) {
    $("#panel-click>div").removeClass("arrow");
    $("#panel-click").removeClass("rotate");
    $('#panel').removeClass('toggled');
  }
});
2
  • Тогда не на mouseover, а на mouseout, пример исправил 22 фев 2016 в 12:56
  • Странно, давайте пример на jsfiddle 22 фев 2016 в 14:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.