Question

当我将鼠标移到它们上面时，我有两个按钮我想要一个面板弹出并保持打开状态，但是，如果鼠标进入另一个按钮，面板将关闭，并且对应于新按钮的面板将打开。但是，这种方法效率不高，因为如果我将鼠标悬停在按钮上并跳过面板并转到其他位置，面板将保持打开状态。我的解决方案是在按钮后面创建一个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');
    });


});

Answer 1

您的HTML缺少容器的关闭div。代码似乎对我有用。

Answer 2

试试这个：

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

Answer 3

快速注意，使代码更容易一些。给出与“step”相同的类相关的元素。例如，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();
  }
});

Answer 4

这似乎解决了这个问题：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');
            }
        });

Answer 5

您的代码按预期工作。但是你可以通过以下方式减少代码并使其更通用，这样如果你改变了按钮/面板的数量，那么你就不必修改你的jQuery脚本。

将按钮ID作为类添加到面板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下面使用：这里我使用了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');
    }
});

<强> Working Demo

Start with Selector

的API文档

使用mouseenter / mouseleave的jquery隐藏元素

5 个答案: