Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Your click handler is capturing the click event for <code>&lt;li class="sub"&gt;</code>. I don't know if that's what you want, but it has the side-effect of ensuring <code>$this.attr("href")</code> consistently returning <code>undefined</code> as the <code>li</code> element lacks that attribute.</p> <p>This leads to the problem of <code>var ulId</code> being undefined, which in turn leads to the problem of <code>$ul</code> always being an empty jQuery object, so nothing else happens.</p> <p>Also, your CSS leads to everything being initially not visible or parked <code>9800px</code> offscreen to the left. Did you mean for something to be visible initially so the user knows where to click or to hover?</p> <p>Please clarify in your question the behavior you are expecting.</p> <p><strong>UPDATE:</strong></p> <p>Per the clarification, below is your jQuery code modified to do what you want:</p> <pre><code>$(function() { var toggleMenu = function(e) { var $this = $(this), ulId = $this.attr("href") || $this.find('a').attr("href"), $ul = $this.parents("ul").filter("ul#" + ulId), //cache query $all = $("ul#menu ul"), //cache query clicked_menu_is_visible = $ul.is(':visible'), //changed .filter to .is visible_uls = $all.is(':visible'); //changed .filter to .is if (!visible_uls) { //no menus showing - just show clicked menu $ul.slideToggle('medium'); } else { //close open menus (should only be one open) then open clicked menu via callback $all.filter(':visible').slideUp("medium", function() { //open clicked menu - unless menu was already open when clicked if (!clicked_menu_is_visible) { $ul.slideToggle('medium'); } }); } console.log('hideMenu triggered'); e.preventDefault(); return false; }; $(document).ready(function() { $('div.top_menu_menub').click(function(e) { $('ul#menu ul').show('medium'); console.log('div clicked'); e.preventDefault(); return false; }); $('li.sub li, ul#menu a').click(toggleMenu); $('ul#menu ul').mouseleave(toggleMenu); }); });​ </code></pre> <p>This works with your HTML structure and CSS. <a href="http://jsfiddle.net/bLmwm/8/" rel="nofollow">Working fiddle here</a>.</p> <p>As a side note, I would write it instead as the following:</p> <pre><code>$(function() { var toggleMenu = function(e) { var self = $(this), elemType = self[0].tagName.toLowerCase(), //get caller menu = null; if (elemType === 'a') { //anchor clicked, nav back to containing ul menu = self.parents('ul').not('ul#menu'); } else if (elemType === 'ul') { //mouseleft ul, ergo menu is this. menu = self; } if (menu) { menu.hide('medium'); } e.preventDefault(); return false; }; $(document).ready(function() { $('div.top_menu_menub').click(function(e) { $('ul#menu ul').show('medium'); console.log('div clicked'); e.preventDefault(); return false; }); $('ul#menu a').click(toggleMenu); $('ul#menu ul').mouseleave(toggleMenu); }); });​ </code></pre> <p>This also works with your HTML structure. <a href="http://jsfiddle.net/bLmwm/7/" rel="nofollow">Working fiddle here</a>.</p>
    singulars
    1. This table or related slice is empty.
    1. POcss menu with jquery
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USpete
    1. USpete
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POcss menu with jquery
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. COthanks for replying... Once clicking the div top_menu_menub(which has a hover background) i would like the menu to drop once clicked with a toggle effect. once the mouse leaves the menu the menu toggles closed.
      singulars
      1. PO
      1. USdavid
    2. COi dont require ahref lookup. but finding hard to tag to the div.
      singulars
      1. PO
      1. USdavid
    3. CO@DavidWalter: Sorry about the delay. Updated answer with working fiddles. Hope this helps.
      singulars
      1. PO
      1. USpete
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload