Question

我有这个HTML：

<div id="site-header-inner">
    <div id="header-logo">
    <?php echo wp_get_attachment_image(get_field('header_logo','options'),'full'); ?>
    </div>
    <div id="header-nav">
        <ul>
            <li class="header-nav-item">
            Articles 
            </li>
            <li class="header-nav-item">
            Art Space
            </li>
            <li class="header-nav-item">
            Job Board
            </li>
            <li class="header-nav-item">
            Calendar
            </li>
        </ul>
    </div>
</div>  
<div id="header-nav-dropdown"> 
    <div id="dropdown-inner">
    Dropdown Stuff
    </div>
</div>

当<li class="header-nav-item">悬停时，我想使用javascript / jquery显示<div id="header-nav-dropdown">。

最简单的方法是什么，只要鼠标悬停在<div id="header-nav-dropdown")或<li>上，同时保持{{1}}可见？

Answer 1

这是实现这一目标的香草方式。添加CSS display:none以隐藏您想要的任何元素（在这种情况下，您悬停li时将显示的标题元素）。

抓住li元素并给他们一个事件。

var derp = document.getElementsByClassName("header-nav-item");
var herp = document.getElementsByClassName("header-nav-dropdown");
for (var i=0;i<derp.length;derp++) { //loop the array of dom elements
    derp[i].addEventListener('mouseover', function() {
        for (var x=0;x<herp.length;herp++) {
            herp[x].style.display = "block"; //or inline etc
        }
    });
    derp[i].addEventListener("mouseout", function() {
        for (var x=0;x<herp.length;herp++) {
            herp[x].style.display = "none"; //hide again
        }
    });
}

这将循环li元素，添加mouseout和mouseover的侦听器，并在其中隐藏/显示带有标题类的所有元素。不需要jQuery！

Answer 2

维护一个小的自我调用函数来管理它可能是最容易的，因此它不会影响任何其他脚本。

我们所做的只是将鼠标悬停事件绑定到我们想要显示下拉列表的项目，当我们鼠标移出时，我们给用户500ms（更改时间

(function($){
    // Select the items you want to bind our mouse events to.
    var $hoverItems = $("#header-nav .header-nav-item, #header-nav-dropdown");
    // Dropdown list.
    var $dropdownList = $("#header-nav-dropdown");
    // This is a timeout variable so we can keep track of our mouse incomings/outgoings.
    var timeout;

    // Bind mouseover/mouseout events.
    $hoverItems.on("mouseover", function(){
        $dropdownList.show();
        clearTimeout(timeout);
    }).on("mouseout", function(){
        timeout = setTimeout(function(){
            $dropdownList.hide();
        }, 500);
    });
})(jQuery);

Answer 3

我会使用变量作为标志并执行以下操作：

var liHover = false;
var dropdownHover = false;
$(document).ready(function() {

    $('.header-nav-item').mouseover(function() {
        liHover = true;
        $('#header-nav-dropdown").show();
    });
    $('#header-nav-dropdown').mouseover(function() {
        dropdownHover = true;
    });

    $('.header-nav-item').mouseout(function() {
        liHover = false;
    });
    $('#header-nav-dropdown').mouseout(function() {
        dropdownHover = false;
    });

    $('.header-nav-item, #header-nav-dropdown').mouseout(function() {
        if (!liHover && !dropdownHover) {
            $('#header-nav-dropdown").show();
        }
    });
});

现在我将解释那里的所有决定。鼠标悬停在单独的方法调用中，因为它比使用if语句并组合它们更有意义。 li悬停需要显示下拉列表并调整其相应的标志，而下拉悬停只需要调整其标志。我选择仍然将鼠标悬停的标志调整分开，但是您可以将它们放在组合的mouseout中并使用if语句。当然，对于组合的，它就是这样，因为这是在任一实例中都存在的功能。

编辑：对不起，我有一个错字，最后一个mouseout说鼠标悬停。它是固定的。

Answer 4

我希望这就是你所需要的！

Jquery的：

$('#header-nav li.header-nav-item').hover(function () {
    $('#header-nav-dropdown').show(); 
}, function () {
    $('#header-nav-dropdown').hide();
});

的CSS：

#header-nav-dropdown {
    display: none;
}

简单的Javascript悬停

4 个答案: