Question

我有以下标记：

<!-- first marker -->
<div class="marker"></div>
<div class="tooltip">
    <p>My tooltip content"</p>
</div>

<!-- second marker -->
<div class="marker"></div>
<div class="tooltip">
    <p>My tooltip content"</p>
</div> 

<!-- repeating..... -->

以及以下jQuery javascript：

$(document).ready(function() {

    $(".marker").hover(function(event){
        $('.tooltip').hide();
        $(this).next('.tooltip').slideDown('fast');
    });

});

如何修改此脚本，以便在悬停所有其他打开的div.tooltips时隐藏除下一个？目前它试图隐藏所有。

Answer 1

您可以使用not功能省略特定元素

$(".marker").hover(function(event){
    var nextEl = $(this).next("div.tooltips");
    $('.tooltip').not(nextEl).hide();
    $(this).next('.tooltip').slideDown('fast');
});

修改

此外，您可能还希望将第二个函数传递给hover，以便在悬停结束时清理内容：

$(".marker").hover(function(event){ var nextEl = $(this).next("div.tooltips"); $('.tooltip').not(nextEl).hide(); $(this).next('.tooltip').slideDown('fast'); }, function() { $('.tooltip').hide(); });

Answer 2

下面的代码应该可以解决问题，

$(document).ready(function() {

    $(".marker").hover(function(event){
        //$('.tooltip').hide();
        $(this).next('.tooltip').eq(0).slideDown('fast');
    }, function (event) {
        $('.tooltip').hide();
    });

});

注意：您需要实现mouseleave功能才能正确显示/隐藏工具提示

Answer 3

我知道有一个not（）函数可以排除某些元素。我从来没有用过它，但它一定是你要找的东西。

Answer 4

你有没有这样你可以通过id或别的东西得到它？因为jQuery中有：not（）选择器

http://api.jquery.com/not-selector/

Answer 5

问题是因为您将hover与一个函数一起使用，这意味着它尝试在mouseover和mouseout上显示工具提示。如果您提供两个功能，一个显示，一个隐藏工具提示，它可以工作：

$(document).ready(function() {
    $(".marker").hover(function(event){
        $('.tooltip').hide();
        $(this).next('.tooltip').slideDown('fast');
    },
    function(event){
        $('.tooltip').slideUp('fast');
    });
});

Example fiddle

jQuery：选择除next之外的所有元素

5 个答案: