demo jsBin 的

Question

我有一个简单的网页，顶部有一个主h1，底部有两个面板。 面板1 可见，面板2 的课程为.hide。
我想要做的是：
当我点击body或h1 - 面板1 应该淡出而面板2 应该淡出在同一时间。
对于第二个面板，当我仅点击h1 - 面板2 时应该淡出，面板1 应该再次淡入。

现在代码：当我点击正文时，它会成功地带来面板2 ，当我点击h1时，它会带我回到面板1 面板2 成功。但是当我点击面板1 上的h1时，它会淡出，显示面板2 一秒钟然后再次淡入并且不会显示第二小组。我该怎么办？

$(function() {  
    $('body,h1').on('click',function (){
        $('div.panel-1').fadeOut(1000);
        $('div.panel-2').fadeIn(1000).removeClass('hide');
        return false;
        });
});


$(function() {
    $('h1').on('click',function (){
        $('div.panel-2').fadeOut(1000);
        $('div.panel-1').fadeIn(1000);
    });
});

Answer 1

demo jsBin 的

您必须使用event.stopPropagation()进行点击事件
并且为了简单起见使用单个类：

$(function() {  
    $('body, h1').on('click',function(e){
      e.stopPropagation();
      $('.panel').fadeToggle();
    });
});

Answer 2

您似乎将两个事件侦听器附加到H1中。您应该只附加一个可以切换面板可见性的侦听器（检测哪些是可见的并相应地切换）。在您的代码中，按顺序调用侦听器。此外，你删除他“隐藏”类，但你不会将它添加回任何地方。

Answer 3

$(function() {
    $('body').on('click',function (e){
        if ($('div.panel-1').is(':visible')  && e.target.tagName != 'h1'){
           $('div.panel-1').fadeOut(1000, function() {
               $('div.panel-2').fadeIn(1000).removeClass('hide');
               $(this).addClass('hide');
           });
        }
        return false;
    });

    $('h1').on('click',function (){
        if ($('div.panel-1').is(':visible')){
           $('div.panel-1').fadeOut(1000, function() {
               $('div.panel-2').fadeIn(1000).removeClass('hide');
               $(this).addClass('hide');
           });
        }else{
           $('div.panel-2').fadeOut(1000, function() {
               $('div.panel-1').fadeIn(1000).removeClass('hide');;
               $(this).addClass('hide');
           });
        }
        return false;
    });
});

只是想要一些更简单的东西，但这些东西往往会被许多点击或意外行为搞砸：

$(function() {
    $('body, h1').on('click',function (){
        $('div.panel-1, div.panel-2').toggleClass('hide').fadeToggle(1000);
        return false;
    });
});

Answer 4

所以这是最终版本，它有效。让我们在html中有两个div，id为panel-1，panel-2.将一个.hide（display：none;）类添加到panel-2。如果有人想要：当点击的身体或h1 - 面板1应该淡出，面板2应该同时淡入。对于仅在h1上单击的第二个面板 - 面板2应该淡出，面板1应该再次淡入。

$（function（）{

$('h1').on('click',function (){
    if ( $('div.panel-2').hasClass('hide')) {
    $('div.panel-1').fadeOut(400).addClass('hide',function() {
    $('div.panel-2').removeClass('hide').fadeIn(400);
    return false;
    });
    }

    else if ( $('div.panel-1').hasClass('hide')) {
    $('div.panel-2').addClass('hide').fadeOut(400,function() {
    $('div.panel-1').fadeIn(400).removeClass('hide');
    });
     return false;
    }

    });

$('body').on('click',function (){
    $('div.panel-1').addClass('hide').fadeOut(400,function() {
        $('div.panel-2').fadeIn(400).removeClass('hide');
        return false;
    });
    });

}）;

jquery淡化和切换

4 个答案:

demo jsBin 的