使用jQuery創建「點擊菜單」來顯示/隱藏div單擊

我是jQuery的新手，需要一些幫助才能在點擊時顯示和隱藏div。基本上我需要顯示一個div（包含一個小菜單），一旦用戶點擊一個鏈接，並且只要用戶點擊剛剛顯示的div內的鏈接。或者點擊外部div我需要再次隱藏div。我的HTML看起來像這樣（我會存在於頁面上的很多地方）。使用jQuery創建「點擊菜單」來顯示/隱藏div單擊

<a class="menu" href="#">Menu</a> 
<div class="menu-content" style="display: none; position: absolute; border: 1px solid black; background-color: White;padding: 5px;"> 
<div><a href="#">Menu option 1</a></div> 
<div><a href="#">Menu option 2</a></div> 
</div>

我也有包裝了，我想我會設置隱藏DIV（趕上實際的菜單以外的點擊）再點擊一下事件的整個頁面一個div。

這是解決這個問題的正確方法，然後我如何刪除包裝div等的處理程序等等。我還應該考慮如何才能做到這一點（如果它是正確的方法）？

更新：基於公認的答案下面我加入這個解決它

//Need to return false here, otherwise the event will bubble up and trigger the hide on body 
$('.menu').click(function() { $('.menu-content').hide();$(this).next().show();return false; }); 
$('body, .menu-content a').click(function() { $('.menu-content').hide();}); 
$('.menu-content a').click(function() { alert($(this)); });

來源

2009-03-03 Riri

html: 

<a class="menu" href="#">Menu</a> 
<div class='a_menu' style="display: none; position: absolute; border: 1px solid black; background-color: White;padding: 5px;"> 
<div><a href="#">Menu option 1</a></div> 
<div><a href="#">Menu option 2</a></div> 
</div> 

script: 

$('.menu').click(function() { $(this).next('.a_menu').show(); }); 
$('body, .a_menu a').click(function() { $('.a_menu').hide(); });

我prolly替換，而不是與風格跨越< A>標籤：基於問題和答案以上「光標指針」

來源

2009-03-03 07:11:14

當我在頁面的多個位置使用它時，這不起作用 – Riri 2009-03-03 07:14:32

看一看suckerfish和listamatic。你試圖達到的目標可能只能通過CSS解決。此外，您將會對如何以更具語義的方式進行導航有所瞭解。

然後，您可以潛入jQuery中尋找無法在純HTML + CSS中完成的東西。

來源

2009-03-03 07:06:39 cherouvim

不錯的文章，但它不是我想要的。不要處理點擊並使用標準的javascript來開始... – Riri 2009-03-03 07:28:06

該腳本簡單地修復了IE6無法：將鼠標懸停在a之外的任何其他位置。 – cherouvim 2009-03-03 07:55:21

，我能夠簡化jQuery代碼得到的東西更接近我所需要的。 HTML很醜陋，並且在這裏有一個完整的菜單欄來將上下拉菜單放在上下文中。

<html> 
<head> 
    <style> 
#menu { 
} 

#menu ul { 
    margin: 0; 
    padding: 8px 0px 0px 0px; 
    list-style: none; 
    line-height: normal; 
} 

#menu li { 
    display: block; 
    float: left; 
} 

#menu a,#menu span { 
    display: block; 
    float: left; 
    height: 28px; 
    background: #34579D; 
    margin-right: 3px; 
    padding: 8px 15px 0px 15px; 
    letter-spacing: -1px; 
    text-decoration: none; 
    text-align: center; 
    text-transform: lowercase; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    font-weight: normal; 
    color: #FFFFFF; 
} 

#menu .drop-menu { 
    cursor: pointer; 
} 

#menu li ul { 
    display: none; 
    position: absolute; 
    margin-top: 31px; 
} 

#menu li ul li { 
    background: #FFFFFF; 
    border-style: solid; 
    border-width: 3px; 
    border-color: #FFFFFF; 
} 
    </style> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript"> 
    //<![CDATA[ 
    //Need to return false here, otherwise the event will bubble up and trigger the hide on body 
    $(document).ready(function() { 
    $('.drop-menu').click(function() { 
     $('.drop-menu-content').toggle(); 
     return false; 
    }); 
    $('body, .drop-menu-content span').click(function() { 
     $('.drop-menu-content').hide(); 
    }); 
    }); 
    //]]> 
    </script> 
</head> 
<body> 
    <div id="menu"> 
    <ul> 
     <li><a href="/" class="first">Home</a></li> 
     <li><a href="/order_report.html" class="value">Order Computer Calculated Value Report</a></li> 
     <li><a href="/php/order_appraisal.php">Order An Appraisal</a></li> 
     <li class="current_page_item"><span class="drop-menu">Sample Reports</span> 
     <ul class="drop-menu-content"> 
      <li><a target="_blank" href="/documents/value_check.pdf">Computer Calculated Report ($20)</a></li> <br /> 
      <li><a target="_blank" href="/documents/desktop.pdf">Computer Desk Top Appraisal ($45)</a></li> <br /> 
      <li><a target="_blank" href="/documents/exterior.pdf">Desk Top/Drive by Appraisal ($95)</a></li> 
     </ul> 
     </li> 
     <li><a href="/FAQ.html">FAQ</a></li> 
     <li><a href="/about_us.html">About Us</a></li> 
     <li><a href="/php/contact.php">Contact Us</a></li> 
     <li> 
     <div class="menu-content"> 
     <ul> 
      <a href="/php/contact.php">Contact Us</a> 
     </ul> 
     </div> 
     </li> 
    </ul> 
    </div> 
</body> 
</html>

來源

2011-07-27 00:02:06 Justin

使用jQuery創建「點擊菜單」來顯示/隱藏div單擊

回答

相關問題