簡單的JavaScript哈弗

我有這樣的一些HTML：簡單的JavaScript哈弗

<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">盤旋，我想說明的<div id="header-nav-dropdown">使用JavaScript/jQuery的。

要做到這一點，最簡單的方法是什麼，同時保持<div id="header-nav-dropdown")只要鼠標懸停在它上面或<li>？

來源

2014-01-22 Eckstein

我會暫時爲您解答一個問題，涵蓋您正在嘗試做的所有事情。 –

你甚至試圖在[stackoverflow]（http://stackoverflow.com/search?q= [jquery] hover + show + div）和/或[google]（https://www.google）上搜索此主題由Matchi.com提供回到/搜索q = jquery的+懸停+顯示+ DIV）？ – Andreas

我確實，這是我如何找到我的問題的大部分答案。我發現了很多JS代碼片段並嘗試了它們，但我無法看到讓它們工作。我希望與我的特定代碼綁定的新解決方案可能會訣竅。 – Eckstein

維護一個小的自我調用函數來管理它可能是最容易的，所以它不會影響任何其他腳本。

我們所要做的就是綁定鼠標懸停事件，我們要揭示的下拉列表中的項目，當我們鼠標移開，我們給用戶500毫秒（更改時間

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

來源

2014-01-22 07:27:07 Croot

這工作直接關閉頁面，謝謝！ – Eckstein

不用擔心隊友。祝你好運，快樂編碼:) – Croot

我會用變量作爲標誌，做這樣的事情：

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懸停需要顯示下拉菜單並調整其各自的標誌，而下拉懸停只需要調整其標誌。我選擇仍然將鼠標懸停的標誌調整分開，但是您可以將它們與if語句組合爲mouseout。那麼當然對於組合的一個來說，就是這樣，因爲這是在任何一個實例中都會存在的功能。

編輯：對不起，我有一個錯字，最後一個mouseout說mouseover。它是固定的。

來源

2014-01-22 06:54:53

這是做到這一點的香草方法。添加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！

來源

2014-01-22 06:58:17

我認爲提供給他的是vanilla JS，但對於一個更像開發人員而不像程序員那樣經驗豐富的人來說，即使像循環這樣的概念有時也會讓人們失望，所以我認爲只要給他加上JQuery版本就可以了，因爲無論如何他都會標記它。不錯，但是！ –

（沒有編輯你的文章是一個混蛋，有一個錯字，我想只是爲你編輯它，如果你已經離開了，並且必須改變另一個詞，所以它會接受錯字） –

我批准了它，別擔心:) –

希望這是你需要什麼

的Jquery：

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

CSS：

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

來源

2014-01-22 07:27:53 skshoyeb

簡單的JavaScript哈弗

回答

相關問題