Question

我有2个div：.left和.right。

我想要的是，当.active类没有链接到这些div时，则启用.hover函数。如果出现这种情况：

if (!($("#panel-left").hasClass("active") || $("#panel-right").hasClass("active"))) {}

但它不起作用，如果我将此条件更改为true或false，则脚本不会实现它。看起来它会记住页面加载中此条件的值，而不是之后的更改。

if (!($("#panel-left").hasClass("active") || $("#panel-right").hasClass("active"))) {
        $(".left").hover(function(){
            $(".left").css("margin-left", "-10%");
            }, function(){
            $(".left").css("margin-left", "-50%");
        });
        $(".left").hover(function(){
            $(".right").css("margin-left", "90%");
            }, function(){
            $(".right").css("margin-left", "50%");
        });
        //animace praveho panelu
        $(".right").hover(function(){
            $(".left").css("margin-left", "-90%");
            }, function(){
            $(".left").css("margin-left", "-50%");
        });
        $(".right").hover(function(){
            $(".right").css("margin-left", "10%");
            }, function(){
            $(".right").css("margin-left", "50%");
        });
    }
    
    $(".left").click(function () {
        $(".left").addClass("active");
        $(".right").removeClass("active");
        $(".left").css("margin-left", "-10%");
        $(".right").css("margin-left", "90%");
        
    });
    $(".right").click(function () {
        $(".right").addClass("active");
        $(".left").removeClass("active");
        $(".left").css("margin-left", "-90%");
        $(".right").css("margin-left", "10%");
    });

body { 
  line-height: 1; 
  overflow-x: hidden;
}
html,body, input, textarea{
    height: 100%;
}

.container{
    width: 100%;
    height: 100%;
    background-color: aqua;
   }
   
    .half{
        display: inline;
        position: absolute;
        width: 100%;
        height: 100%;
        transition-duration: .5s;
        transition-timing-function: ease-in-out;
    }
    
    .left{
        margin-left: -50%;
        background-color: antiquewhite;
    }
    .right{
        margin-left: 50%;
        background-color: cadetblue;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
            <div class="half left" id="panel-left">
                
            </div>
            <div class="half right" id="panel-right">
                
            </div>
        </div>

目标：

当页面加载时，悬停起作用，但是一旦你点击其中一个div，那么

$(".right").click(function () {
  $(".right").addClass("active");
});

所以在这个逻辑中，.active将被添加到.right中，因此悬停将不再起作用......但确实如此。

Answer 1

function clicked() {
  var bool = ($("#panel-left").hasClass("active") || $("#panel-right").hasClass("active"));
  return bool;


}

$(".left").hover(function() {
  if (!clicked()) ;
    $(".left").css("margin-left", "-10%");
}, function() {
  if (!clicked())
    $(".left").css("margin-left", "-50%");
});
$(".left").hover(function() {
  if (!clicked())
    $(".right").css("margin-left", "90%");
}, function() {
  if (!clicked())
    $(".right").css("margin-left", "50%");
});
//animace praveho panelu
$(".right").hover(function() {
  if (!clicked())
    $(".left").css("margin-left", "-90%");
}, function() {
  if (!clicked())
    $(".left").css("margin-left", "-50%");
});
$(".right").hover(function() {
  if (!clicked())
    $(".right").css("margin-left", "10%");
}, function() {
  if (!clicked())
    $(".right").css("margin-left", "50%");
});


$(".left").click(function() {
  $(".left").addClass("active");
  $(".right").removeClass("active");
  $(".left").css("margin-left", "-10%");
  $(".right").css("margin-left", "90%");

});
$(".right").click(function() {
  $(".right").addClass("active");
  $(".left").removeClass("active");
  $(".left").css("margin-left", "-90%");
  $(".right").css("margin-left", "10%");
});

可以优化，但至少它可以满足您的需求。希望有所帮助，祝你好运！

Answer 2

var left = $('.left');
var right = $('.right');


function activateHoverRight() {
// remove left hover listener
  left.off('hover');
  right.hover(function() {
    right.css("margin-left", "10%");
    left.css("margin-left", "-90%");
  }, function(){
    right.css("margin-left", "50%");
    left.css("margin-left", "-50%");
  });
}

function activateHoverLeft() {
  // remove right listener
  right.off('hover');
  left.hover(function() {
    left.css("margin-left", "-10%");
    right.css("margin-left", "90%");
  }, function(){
    left.css("margin-left", "-50%");
    right.css("margin-left", "50%");
  });
}

left.click(function () {
  activateHoverLeft();
  left.css("margin-left", "-10%");
  right.css("margin-left", "90%");   
});

right.click(function () {
  activateHoverRight();
  left.css("margin-left", "-90%");
  right.css("margin-left", "10%");
});

jQuery如果.hasClass，则启用.hover

2 个答案: