点击显示鼠标的Jquery离开隐藏侧边栏

Jquery on click show mouseleave hide sidebar

本文关键字：离开 隐藏 侧边栏 Jquery 显示 鼠标      更新时间：2023-09-26

嗨，我需要一些这个脚本，我设法通过鼠标单击显示面板，但我希望当我的鼠标离开面板时它会关闭它这是示例 http://jsfiddle.net/jikey/w9s7pt25/

$(function(){
    $('.slider-arrow').click(function(){
        if($(this).hasClass('show'))
        {
            $( ".slider-arrow, .spanel" ).animate({
                right: "+=182"
            }, 700, function() {
                // Animation complete.
            });
            $(this).html('<img src="images/sideclose.png" />').removeClass('show').addClass('hide');
        }
        else 
        {      
            $( ".slider-arrow, .spanel" ).animate({
                right: "-=182"
            }, 700, function() {
                // Animation complete.
            });
            $(this).html('<img src="images/sideopen.png" />').removeClass('hide').addClass('show');    
        }
    });
});

这里你需要写 2 个方法。

jQuery click显示单击箭头的部分，jQuery onmouseleave隐藏退出该部分的部分。

我建议您在（背景样式）CSS中显示与类相关的slideopen.png和slideclose.png文件。

方法1：click

j查询代码： 

$('.slider-arrow').on("click", function(){
       if($(this).hasClass('show')){
        $( ".slider-arrow, .panel" ).animate({
          right: "+=300"
          }, 700, function() {
            // Animation complete.
          });     $(this).html('&laquo;').removeClass('show').addClass('hide');
        }
});

方法2：mouse leave

j查询代码：

$(".panel").on("mouseleave", function(){
        if(!$('.slider-arrow.show').hasClass('show')) {
        $( ".slider-arrow, .panel" ).animate({
          right: "-=300"
          }, 700, function() {
            // Animation complete.
          });
          $(".slider-arrow").removeClass('hide').addClass('show');   
        }
 });

演示链接：http://jsfiddle.net/w9s7pt25/7/

您可以做的是添加一个单独的鼠标输出函数，如此 jsfiddle 所示。 代码的问题在于，mouseover 事件只作用于.slider-arrow一次，将类更改为 hide，然后期望另一个鼠标悬停读取它需要隐藏。

$(function () {
    $('.slider-arrow').mouseover(function () {
        if ($(this).hasClass('show')) {
            $(".slider-arrow, .panel").animate({
                right: "+=300"
            }, 700, function () {
                // Animation complete.
            });
            $(this).html('&laquo;').removeClass('show').addClass('hide');
        }
    });
    $('.panel').mouseout(function () {
        if ($('.slider-arrow').hasClass('hide')) {
            $(".slider-arrow, .panel").animate({
                right: "-=300"
            }, 700, function () {
                // Animation complete.
            });
            $('.slider-arrow').html('&raquo;').removeClass('hide').addClass('show');
        }
    });
});

希望这是有道理的。

您可以使用

mouseout或mouseleave。我想你会在panel中添加一些元素.因此，当指针移出子元素时也会触发mouseout，而mouseleave仅在指针移出绑定元素时触发

 $('.panel').mouseleave(function() {   
     if($('.slider-arrow').hasClass('hide')){
         $( ".slider-arrow, .panel" ).animate({
            right: "-=300"
         }, 700);
         $('.slider-arrow').html('&raquo').removeClass('hide').addClass('show');     
     }
   });

您可以在面板上附加 jquery .mouseleave（） 函数，并让它仅在面板可见时才执行 还可以添加一个类似"visible"的类来保持面板的可见性状态，如下所示： http://jsfiddle.net/gakuru/d2qnrm2x/

    $('.panel').on('mouseleave',function(){
    if($(this).hasClass('visible')){
        $( ".slider-arrow, .panel" ).animate({
      right: "-=300"
      }, 700, function() {
        // Animation complete.
      });
    $('.slider-arrow').html('&raquo;').removeClass('hide').addClass('show');
    $('.panel').removeClass('visible');
   }
});
相关文章：