Javascript 单击显示鼠标删除隐藏侧边栏Jquery

嗨，我需要一些和这个脚本，我设法显示和鼠标点击面板，但我想当我的鼠标离开面板，它会关闭它 这是样品

$（函数（）{
$（'.slider arrow'）。单击（函数（）{
if（$（this）.hasClass（'show'））
{
$（“.slider arrow，.spanel”）。设置动画({
右：“+=182”
}，700，函数（）{
//动画完成。
});
$（this.html（“”）.removeClass（'show'）.addClass（'hide'）；
}
其他的
{      
$（“.slider arrow，.spanel”）。设置动画({
右：“-=182”
}，700，函数（）{
//动画完成。
});
$（this.html（“”）.removeClass（'hide'）.addClass（'show'）；
}
});
});

您可以添加一个单独的mouseout函数，如图所示。代码中的问题是鼠标悬停事件只作用于

。滑动箭头

一次，将类更改为

隐藏

，然后期望另一个鼠标悬停读取它需要隐藏

$(function () {
    $('.slider-arrow').mouseover(function () {
        if ($(this).hasClass('show')) {
            $(".slider-arrow, .panel").animate({
                right: "+=300"
            }, 700, function () {
                // Animation complete.
            });
            $(this).html('«').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('»').removeClass('hide').addClass('show');
        }
    });
});

---

希望有意义。

您可以使用

mouseout

或

mouseleave

。我想您应该在

面板中添加一些元素。因此，当指针移出子元素时，
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函数附加到面板上，并让它仅在面板可见时执行。还可以添加一个类似“visible”的类，以保持面板的可见性状态，如下所示：

这里您需要编写两个方法

jQuery
单击
显示单击箭头的部分，jQuery
onmouseleave
隐藏从该部分出来的部分

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

方法1：在
上单击

jQuery代码：

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

$(".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');   
        }
 });

方法2：在
上鼠标离开

jQuery代码：

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

$(".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');   
        }
 });

演示链接：