CODEWITHSUNDEEP
jquery
Riri
Riri

Reputation: 11977

Show/hide div on click using jQuery to create a "click menu"

I'm new to jQuery and need some help to show and hide a div on click. Basically I need to show a div (containing a small menu) once the user click on a link, and as soon as the user click on a link inside the div just shown. Or clicks outside the div I need to hide the div again.my HTML looks something like this (I'll exist in many places on the page).

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

I also have a div that wraps the whole page that I thought I'd set another click-event on to hide the div (to catch clicks outside of the actual menu).

Is this the right approach for solving this and how do I then remove the handlers on the wrapper div etc, etc. What else should I think of to get this right (if it it's the right approach that is)?

Update: Based on the accepted answer below I added this to solve it

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

Upvotes: 2

Views: 56429

Answers (3)

Justin
Justin

Reputation: 21

Based on the question and answers above, I was able to simplify the jquery code to get something closer to what I needed. The HTML is ugly, and there's a full menu bar in here to put the drop down menu in context.

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

Upvotes: 2

Scott Evernden
Scott Evernden

Reputation: 39966

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

I'd prolly replace the < A > tags with SPANS instead styled with 'cursor:pointer'

Upvotes: 14

cherouvim
cherouvim

Reputation: 31903

Have a look at suckerfish and listamatic. What you trying to achieve may be solvable by CSS only. In addition you'll have gained some insight on how to do your navigation in a more semantic way.

Then you can dive into jQuery for stuff that cannot be done in plain HTML+CSS.

Upvotes: 1

Related Questions