Jquery скрывает элемент с помощью mouseenter/mouseleave

Итак, у меня есть две кнопки, когда я навожу на них мышь, я хочу, чтобы панель выскочила и оставалась открытой, однако, если мышь нажмет другую кнопку, панель закроется, а панель, соответствующая новой кнопке, откроется. Однако этот подход не очень эффективен, поскольку, если я наведу указатель мыши на кнопку, пропущу панель и перейду в другое место, панель останется открытой. Мое решение состояло в том, чтобы создать div за кнопками, я хотел, чтобы мой jquery закрывал любые открытые панели, когда мышь перемещается за пределы панелей или кнопки. Однако по какой-то причине приведенная ниже функция $('#Container').hover(function()) не работает. Есть предложения?

код ниже, ссылка на проект: http://jsfiddle.net/max0626/727qp/

$(document).ready(function () {
    $('.panel1').hide();
    $('.panel2').hide();
    $('#Button1').mouseenter(function() {
        $('.panel2').hide();
        $('#Button2').removeClass('active');
        $('.panel1').fadeIn("slow");
        $('#Button1').addClass('active');
        });
    $('.panel1').mouseleave(function() {
        $('.panel1').fadeOut("fast");
        $('#Button1').removeClass('active');
    });

$('#Button2').mouseenter(function() {
    $('.panel1').hide();
    $('#Button1').removeClass('active');
    $('.panel2').fadeIn("slow");
    $('#Button2').addClass('active');
    });
    $('.panel2').mouseleave(function() {
        $('.panel2').fadeOut("fast");
        $('#Button2').removeClass('active');
    });

$('#Container').hover(function() {
    $('.panel1').fadeOut('fast');
    $('.panel2').fadeOut('fast');
    $('#Button1').removeClass('active');
    $('#Button2').removeClass('active');
    });


});

hide jquery mouseenter mouseleave
person Raz    schedule 24.06.2014    source источник
comment
Код работает, как и ожидалось для меня.   -  person Bhushan Kawadkar    schedule 24.06.2014
comment
Мне то же самое. Можете ли вы лучше объяснить проблему (если она есть)?   -  person Nicolas Henrard    schedule 24.06.2014
comment
проблема в том, что если я наведу указатель мыши за пределы кнопки 2 или кнопки 1 после того, как панель была открыта, панель остается открытой. Если я не наведу курсор на панель, прежде чем перейти куда-то еще, кроме кнопки, панель не закроется.   -  person Raz    schedule 24.06.2014
comment
см. эту ссылку jsfiddle.net/727qp/6. это тебе нужно   -  person Balachandran    schedule 24.06.2014
comment
Если возникнут какие-либо проблемы, отправьте мне ответ!!   -  person Jain    schedule 24.06.2014

Ответы (5)


arrow_upward
0
arrow_downward

В вашем HTML отсутствует закрывающий элемент div для контейнера. Код, кажется, работает для меня.

person James Hunt    schedule 24.06.2014

arrow_upward
0
arrow_downward

Небольшое примечание, чтобы сделать ваш код немного проще... дайте элементам, связанным с "шагом", один и тот же класс. Например, Button2 и panel2 могут иметь один и тот же класс «step2».

$(document).ready(function () {
  $('.step1, .step2').hide();

  $('#Button1').mouseenter(function() {
    $('.step2').hide().removeClass('active');
    $('.step1').fadeIn("slow").addClass('active');
  });

  $('.step1').mouseleave(function() {
    $('.step1').fadeOut("fast").removeClass('active');
  });

  $('#Button2').mouseenter(function() {
    $('.step1').hide().removeClass('active');
    $('.step2').fadeIn("slow").addClass('active');
  });

  $('.step2').mouseleave(function() {
    $('.step2').fadeOut("fast").removeClass('active');
  });

  $('#Container').hover(function() {
    $('.step1, .step2').fadeOut('fast').removeClass('active');
  });
});

Сказав это, похоже, что, возможно, чтобы решить ваш фактический вопрос, вам нужно настроить своего рода глобальный сброс. Таким образом, каждый раз, когда вы наводите курсор на что-либо, вы запускаете сброс, ТОГДА проверяете, что должно быть видно:

$('#button1, #button2).mouseenter(function(ev) {
  $('.step1, .step2').hide().removeClass('active');

  if ($(ev.currentTarget).hasClass('step1')) {
    doStuffForStep1();
  } else {
    doStuffForStep2();
  }
});
person relic    schedule 24.06.2014

arrow_upward
0
arrow_downward

это, кажется, исправляет это: http://jsfiddle.net/727qp/9/

    $('#Container').mousemove(function(e) {
        if(e.target.id=='Container'){
            $('.panel1').fadeOut('fast');
            $('.panel2').fadeOut('fast');
            $('#Button1').removeClass('active');
            $('#Button2').removeClass('active');
            }
        });
person Amin Jafari    schedule 24.06.2014

arrow_upward
0
arrow_downward

Ваш код работает так, как ожидалось. Но вы можете уменьшить свой код и сделать его более универсальным следующим образом, так что если вы измените количество кнопок/панелей, вам не нужно будет изменять свой скрипт jQuery.

Добавьте идентификатор кнопки в качестве класса в панель div следующим образом:

<div id="Container">
 <div id="Button1">Button1</div>
 <div id="Button2">Button2</div>
 <div class="panel1 Button1">
     <p>Insert Content Here! for Button1</p>
 </div>
 <div class="panel2 Button2">
      <p>Insert Content Here! for Button2</p>
  </div>
</div>

И используйте jQuery ниже: здесь я использовал start с селектором jQuery. См. ссылку на документ внизу.

$(document).ready(function () {
    $('[class^=panel]').hide();// hide all panels
    $('[id^=Button]').mouseenter(function() {
        hideAndInactive();// hide panel and remove active class from button 
        // fadeIn panel with class = button id        
        $('.'+$(this).attr('id')).fadeIn("slow");
        // add active class to button
        $(this).addClass('active');
     });

     $('[class^=panel]').mouseleave(function() {
        //fadeout current panel
        $(this).fadeOut("fast");
        // get class of panel which is same as button id
        var buttonClass = $(this).attr('class').split(' ')[1];      
        // find previous button with id=buttonClass 
        $(this).prev('[id^='+buttonClass+']').removeClass('active');
      });

    $('#Container').hover(function() {
        // hide panel and remove active class from button
        $('[class^=panel]').fadeOut('fast');        
        $('[id^=Button]').removeClass('active');
     });

    // hide panel and remove active class from button
    hideAndInactive = function(){
       $('[class^=panel]').hide();
       $('[id^=Button]').removeClass('active');
    }
});

Рабочая демонстрация

Документация по API для Начать с селектора

person Bhushan Kawadkar    schedule 24.06.2014

arrow_upward
0
arrow_downward

Попробуй это:

$('#Container').hover(function(e) { 
    if( e.target !== this ) 
        return false;
    $('.panel1').fadeOut('fast');
    $('.panel2').fadeOut('fast');
    $('#Button1').removeClass('active');
    $('#Button2').removeClass('active');
});
person Jain    schedule 24.06.2014