jQuery选择一个类和这个类的'next'元素

syqv5f0l  于 2023-06-22  发布在  jQuery
关注(0)|答案(2)|浏览(151)

是否可以为同一个鼠标输入器同时选择$('.foo')$(this).next('.subfoo')
我有一个代码,需要我以这种方式选择'.subfoo'的示例,我希望它在鼠标移动到'.foo'上时显示最近的'.subfoo'示例,并且不隐藏'.subfoo',直到鼠标离开两者。
我想我已经弄清楚了这部分代码,但是我不知道如何在一条语句中同时选择这两个选项&我找不到任何关于它的信息。
谢谢

72qzrwbm

72qzrwbm1#

可以使用Multiple Selector语法

$('selector1, selector2, selectorN')

JQuery add方法

var combinedSet = $(this).next('subfoo').add('.foo');
combinedSet.mouseenter(function() { 
    //do stuff in here
});
4uqofj5v

4uqofj5v2#

我在这里开发的脚本是一个链接列表,每个链接都有一个弹出窗口,其中包含有关该链接的更多信息。这个问题的目的是弄清楚如何通过将鼠标悬停在图标上来打开弹出窗口,并且在鼠标离开图标并进入弹出窗口之后使其保持打开。
部分困难在于同一页面上有许多相同类型对象的示例,因此解决方案必须是通用的,并触发最接近悬停图标的弹出窗口。
HTML:

<li class="foo">
   <span class="icon"></span>
   <a href="">Title</a>
</li>
<li class="subfoo">
   Pop-out contents
</li>

JavaScript:

/*setup of variables and functions to be used*/

function clear(){ //set up a function to hide all pop-outs
$('.foo').each(function(){
$(this).next('.subfoo').hide()});}

var popoutHover = false; //initialize switch variable for following function:

$('.subfoo').mouseenter(function(){
popoutHover = true;}); //Set the variable to 'true' if the mouse is hovering over a pop-out

$('.subfoo').mouseleave(function(){
popoutHover = false; //Set the variable to 'false' and hide pop-outs if the mouse leaves
clear();
});

/*The main functionality*/

$('.icon').hoverIntent(function(){ //Hover over the icon for a link
        clear(); //Hide open pop-outs
        $(this)
            .closest('.foo') //Select the link next to the icon
            .siblings('.subfoo') //Select the pop-out for the link
            .slideDown(240)}, //Open the pop-out

function(){//If the mouse leaves the icon
        if (!popoutHover){ //And it is not hovering over a pop-out
        $(this)
            .closest('.foo') //Select the link
            .siblings('.subfoo') //Hide the pop-out
            .hide()}}
);

这里有一个快速的小提琴,因为它可能比我现在能解释的更好:https://jsfiddle.net/kuzvgqkz/1/

相关问题