jquery - 您如何使用相同的代码 jquery 分配单个 .hover

Question

我已经使用 jquery 创建了以下滑动效果 - 但我希望它在每次悬停时工作一次。

 // Get a reference to the container.
            var container = $( ".container" );
            // Bind the link to toggle the slide.
            $("a.hover-btn" ).hover(
                function( e ){
                    // Prevent the default event.
                    e.preventDefault();
                    // Toggle the slide based on its current
                    // visibility.
                    if (container.is( ":visible" )){

                        // Hide - slide up.
                        container.slideUp( 200 );
                        $('a.hover-btn').addClass('off');
                        $('a.hover-btn').removeClass('on');

                    } else {

                        // Show - slide down.
                        container.slideDown( 200 );
                        $('a.hover-btn').addClass('on');
                        $('a.hover-btn').removeClass('off');

                    }
                }
            );

http://jsfiddle.net/zidski/XtBPQ/

Answer 1

这应该可以解决问题，因为您不能取消绑定相等的 jQuery 函数本身（据我所知）：

$('a.hover-btn').unbind('mouseenter').unbind('mouseleave');

这实际上是取消绑定 jQuery 放在标签上的本机绑定（侦听器）。

对于某些浏览器，上述代码效果更好，对于某些浏览器，此代码效果更好：

$('a.hover-btn').unbind('mouseenter mouseleave');

尝试最适合您的方法。

祝你好运！

Answer 2

用于.siblings()获取所需的容器：

// Bind the link to toggle the slide.
$("a.hover-btn").hover(

function (e) {
    // Prevent the default event.
    e.preventDefault();
    // Toggle the slide based on its current
    // visibility.
    // Get a reference to the container.
    var container = $(this).siblings(".container");
    if (container.is(":visible")) {

        // Hide - slide up.
        container.slideUp(200);
        $('a.hover-btn').addClass('off');
        $('a.hover-btn').removeClass('on');

    } else {

        // Show - slide down.
        container.slideDown(200);
        $('a.hover-btn').addClass('on');
        $('a.hover-btn').removeClass('off');

    }
});

演示：http: //jsfiddle.net/XtBPQ/2/

但我建议使用mouseenterand mouseleave，更好地控制这种方式：

// Bind the link to toggle the slide.
$("a.hover-btn").on('mouseenter', function () {
    var $btn = $(this);

    // Get a reference to the container.
    var $container = $btn.siblings(".container");

    $container.slideDown(200);
    $btn.addClass('on');
    $btn.removeClass('off');
})
.on('mouseleave', function () {
    var $btn = $(this);

    // Get a reference to the container.
    var $container = $btn.siblings(".container");

    // Hide - slide up.
    $container.slideUp(200);
    $btn.addClass('off');
    $btn.removeClass('on');
});

演示：http: //jsfiddle.net/XtBPQ/6/

Answer 3

导航到父 div，然后找到 .container..

// Get a reference to the container.

// Bind the link to toggle the slide.
$("a.hover-btn" ).hover(
    function( e ){
        // Prevent the default event.
        e.preventDefault();
        // Toggle the slide based on its current
        // visibility.
        var current_container = $(this).parent('.sliderContent').children('.container');
        if (current_container.is( ":visible" )){

            // Hide - slide up.
           current_container.slideUp( 200 );
            $(this).addClass('off');
            $(this).removeClass('on');

        } else {

            // Show - slide down.
            current_container.slideDown( 200 );
            $(this).addClass('on');
            $(this).removeClass('off');

        }
    }
);

或者代替

var current_container = $(this).parent('.sliderContent').children('.container');

你可以做其他海报所做的事情

var current_container = $(this).siblings(".container");

演示：http: //jsfiddle.net/XtBPQ/4/

Answer 4

编辑O im 到迟到 xD

$("a.hover-btn").hover(

function (e) {
    // Prevent the default event.
    e.preventDefault();
    // Toggle the slide based on its current
    // visibility.
    // Get a reference to the container.
    var container = $(this).siblings(".container");
    if (container.is(":visible")) {

        // Hide - slide up.
        container.slideUp(200);
        $('a.hover-btn').addClass('off');
        $('a.hover-btn').removeClass('on');

    } else {

        // Show - slide down.
        container.slideDown(200);
        $('a.hover-btn').addClass('on');
        $('a.hover-btn').removeClass('off');

    }
});

您确实告诉 Jquery var 容器与类容器（所有容器）是相同的。使用 var container = $(this).siblings(".container"); 您只选择与您的 div 悬停匹配的容器。

Answer 5

试试这个，看看这是否是你想要实现的目标：

$("a.hover-btn").hover(function (e) {
   e.preventDefault();
   $(this).siblings().removeClass('on').slideDown(200);
   $(this).addClass('on');
}, function () {
   $(this).removeClass('on').siblings().slideUp(200);
});

检查小提琴

但是就性能而言，您可以缓存对象：

var $this = $(this);
$("a.hover-btn").hover(function (e) {
   e.preventDefault();
   $this.siblings().removeClass('on').slideDown(200);
   $this.addClass('on');
}, function () {
   $this.removeClass('on').siblings().slideUp(200);
});