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 that you have read and understand our privacy policy and code of conduct.

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