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

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

使用.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/

但我建议使用mouseenter和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 2

这应该可以做到，因为你不能取消绑定相等的jQuery函数本身(据我所知):

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

这实际上是取消了jQuery在标签上的本地绑定(侦听器)。

对于某些浏览器，上面的代码效果更好，对于某些浏览器，这段代码效果更好:

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

尝试最适合你的。

祝你好运!

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

edit O im to late 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容器是允许与类容器，所有的容器。Make with 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);
});

CHECKOUT THE FIDDLE

但是在性能方面，你可以缓存对象:

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);
});