Question

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

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

Answer 1

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

我会多次取代＆lt; A＆gt;带有SPANS的标签，而不是'cursor：pointer'

Answer 2

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

Answer 3

查看suckerfish和listamatic。你想要实现的目标可能只能由CSS解决。此外，您将获得有关如何以更加语义的方式进行导航的一些见解。

然后你可以深入研究jQuery中那些无法在纯HTML + CSS中完成的东西。

单击使用jQuery显示/隐藏div以创建“单击菜单”

3 个答案: