使用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单击

回答

相关问题