在鼠標懸停在父元素上時，顯示子項（下拉導航）

我試圖製作一個愚蠢的水平導航欄，並在某些項目上有一個下拉列表。我決定這麼做的方法就是將下拉列表放在div標籤中。這很容易改變，我只是不喜歡在html方面沉重。在鼠標懸停在父元素上時，顯示子項（下拉導航）

基本上我只是想讓我的下拉菜單在您將鼠標懸停在父元素上時工作。額外的CSS將被用來使它更漂亮，定位更好。

這裏是我的JS：

var dropdown = $('.dropdown'); 
var parent = dropdown.parent(); 
$(parent).hover(
    function() { 
     dropdown.css('display', 'block'); 
    } 
);

這裏是我的CSS：

div.nav { 
    text-align: center; 
} 
div.nav > ul > li { 
    margin-top: 15px; 
    text-align: center; 
    font-size: 1.25em; 
} 
div.nav > ul > li { 
    display: inline-block; 
    list-style-type: none; 
} 
div.nav a { 
    padding: 1em; 
} 
div.dropdown { 
    display: none; 
    background-color: black; 
    position: absolute; 
}

這裏是我的html：

<div class="nav"> 
    <ul> 
     <li><a href="index.html">Home</a></li> 
     <li> 
      <a href="game.html">Sample Game</a> 
      <div class="dropdown"> 
       <a href="index.html">About it</a> 
       <br> 
       <a href="index.html">Game</a> 
      </div> 
     </li> 
     <li><a href="solutions.html">TP Solutions</a></li> 
     <li><a href="projects.html">Projects</a></li> 
     <li><a href="contact.html">Contact Me</a></li> 
    </ul> 
<div class="clear"></div>

來源

2013-01-20 Tom Prats

我知道，我其實是有它使用CSS，但因爲我要的大小子元素是大小，我想其切換到JS父一樣。我無法弄清楚CSS中的大小，沒有硬編碼，寬度= 100％沒有工作 –

你不應該使用「父」作爲變量名，因爲它是一個保留字。

$(document).ready(function() { 
    var $dropdown = $('.dropdown'), 
     $parent = $dropdown.parent(); 
    $parent.on("mouseover", 
     function() { 
      $dropdown.css('display', 'block'); 
     } 
    ); 
    $parent.on("mouseout", 
     function() { 
      $dropdown.css('display', 'none'); 
     } 
    ); 
});

來源

2013-01-20 06:18:17 petermk

mouseove和hover之間的區別是什麼？ –

@Tmp看看你是否使用jquery 1.9.1版本，然後不要使用'.hover' – Jai

我試過了，但它不起作用。即時通訊也使用最新版本 –

根據這個必須完成的oreder：

添加一個jQuery插件，第一
添加您的腳本

這樣的順序將是這樣的：

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'> 
</script> 

<script> 
    $(function(){ 
     var dropdown = $('.dropdown'); 
     var parent = dropdown.parent(); 
     $(parent).hover(function() { 
     dropdown.css('display', 'block'); 
     }); 
    }); 
</script>

來源

2013-01-20 06:33:28 Jai

對不起，我沒有包括該部分的代碼，但我首先導入jQuery。你的代碼似乎對我有用，謝謝！真的不知道爲什麼...... –

有一個重新使用jQuery和CSS來顯示下拉菜單的很多好的解決方案。所以你不需要重新發明輪子。這裏有一些examples，你可能會找到一個適合你的需求。

來源

2013-01-20 06:47:20 AnthonyY

如果有些人真的想學習而不是盲目地抄襲他人的代碼，該怎麼辦？ – petermk

同意。但一些例子非常簡單。所以他們自己可以用作很好的教程。看看這[一]（http://www.webdesigndev.com/web-development/create-the-fanciest-dropdown-menu-you-ever-saw），你會明白我的意思。 :) – AnthonyY

我沒有借用一個簡單的CSS解決方案，但這個JS很簡單，應該工作 –

請嘗試下面的代碼。

$(".nav").on("mouseenter","li",function(){ 
     $(this).find(".dropdown").show(); 
    }); 
    $(".nav").on("mouseleave","li",function(){ 
     $(this).find(".dropdown").hide(); 
    });

在你的代碼「dropdown.parent（）;」 - >這將引用所有的父母，有孩子下拉菜單，並會顯示菜單。我們需要引用當前的懸停父項。請在下面的鏈接中查看工作示例。

http://jsfiddle.net/renjith/wX48f/

來源

2013-01-20 07:29:27 Renjith

在鼠標懸停在父元素上時，顯示子項（下拉導航）

回答

相關問題