单击时显示/隐藏div使用jQuery创建一个；单击菜单"；_Jquery

单击时显示/隐藏div使用jQuery创建一个；单击菜单"；

jquery

单击时显示/隐藏div使用jQuery创建一个；单击菜单"；,jquery,Jquery,我是jQuery新手，需要一些帮助来在单击时显示和隐藏div。基本上，我需要显示一个div（包含一个小菜单），一旦用户点击一个链接，只要用户点击刚刚显示的div内的链接。或者在div之外单击，我需要再次隐藏div。我的HTML看起来像这样（我会在页面上的许多地方出现）看一看，看一看。您试图实现的目标可能只能通过CSS来解决。此外，您还将了解如何以更具语义的方式进行导航然后，您可以深入jQuery，查找普通HTML+CSS无法完成的内容。HTML: html: <a class="me

我是jQuery新手，需要一些帮助来在单击时显示和隐藏div。基本上，我需要显示一个div（包含一个小菜单），一旦用户点击一个链接，只要用户点击刚刚显示的div内的链接。或者在div之外单击，我需要再次隐藏div。我的HTML看起来像这样（我会在页面上的许多地方出现）

看一看，看一看。您试图实现的目标可能只能通过CSS来解决。此外，您还将了解如何以更具语义的方式进行导航

然后，您可以深入jQuery，查找普通HTML+CSS无法完成的内容。

HTML:
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(); });

脚本：
$（'.menu'）。单击（function（）{$（this）.next（'.a_-menu'）.show（）；}）；
$（'body.a_菜单a'）。单击（function（）{$（'a_菜单'）。hide（）；}）；

我会用span替换标记，而不是用“cursor:pointer”样式。

基于上面的问题和答案，我能够简化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>


#菜单{
}
#菜单ul{
保证金：0；
填充：8px 0px 0px 0px；
列表样式：无；
线高：正常；
}
#菜单里{
显示：块；
浮动：左；
}
#菜单a，#菜单范围{
显示：块；
浮动：左；
高度：28px；
背景#34579D；
右边距：3倍；
填充：8px 15px 0px 15px；
字母间距：-1px；
文字装饰：无；
文本对齐：居中；
文本转换：小写；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：14px；
字体大小：正常；
颜色：#FFFFFF；
}
#菜单，下拉菜单{
光标：指针；
}
#菜单{
显示：无；
位置：绝对位置；
边缘顶端：31像素；
}
#菜单李乌丽{
背景：#FFFFFF；
边框样式：实心；
边框宽度：3倍；
边框颜色：#FFFFFF；
}
//




示例报告

如果我在页面中的多个位置都有它，那么这将不起作用。如果您在Q中说过这一点，可能会有所帮助-您可以优化我提供的代码，并在选择器上使用上下文和过滤器来处理页面上的所有菜单page@Scott：我是。。。“我会出现在页面上的许多地方”。在你的代码中，你只需点击实际链接就可以隐藏菜单。。。不在菜单之外。是的，好吧，我没有意识到一个你不能作为起点的不精确的、经过充分测试的答案会让我失去声誉。我希望你对编辑更满意。好运气我提供的代码btw将隐藏任何点击文档体上的所有菜单。如果您想要ICE文章，您也可以将包装器div添加到列表中，但这根本不是我想要的。不处理点击并使用标准javascript开始…该脚本只是修复了IE6无法：悬停在a以外的任何东西上。我对bcz有问题，我没有返回false：这是一个完美的答案。谢谢

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

<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>