• Category 1
    Geek asks and answers

    Need jQuery selector for <ul> inside hang <li>

    Here is my XHTML code:

    <ul id="MenuBar1">
  <li>
    <div class="menuBox">Category 1</div>
  </li>
  <li class="hasasubmenu">
    <div class="menuBox">Category 2</div>
    <ul>
      <li><a href="link.html">Link 1</a></li>
      <li><a href="link.html">Link 2</a></li>
      <li><a href="link.html">Link 3</a></li>
    </ul>
  </li>
  <li class="hasasubmenu">
    <div class="menuBox">Category 3</div>
    <ul>
      <li><a href="link.html">Link</a></li>
      <li><a href="link.html">Link</a></li>
    </ul>
  </li>
  <li>
    <div class="menuBox">Category 4</div>
  </li>
</ul>

    In fact, I want to create a hover menu to show links. (in any case, the standard menu :))

    And here is my JS code:

    /* menu handler */
$(document).ready(function(){
  $('#MenuBar1 li.hasasubmenu').hover(function(){
    **(selector that select the sub <ul> of the hovered <li>)**.toggle();
  });
});

    Can you help me find a selector (in bold (**) in the JS code) that will be used to switch?

    +3
    source share
    2 answers

    children () or find ()

    /* menu handler */
    $(document).ready(function(){
      $('#MenuBar1 li.hasasubmenu').hover(function(){
        $(this).children('ul').toggle(); // select the ul
      });
    });

    Example: http://jsfiddle.net/niklasvh/2GY4V/

    +3
    source

    Why are you using jQuery for this? You can do this using only CSS http://jsfiddle.net/XBdAL/

    <ul>
   <li>List Item 1</li>
   <li>List Item 1
      <ul>
         <li>List Item 2</li>
         <li>List Item 2
      </ul>
   </li>
</ul>

    and CSS

    ul {
        list-style: none;
        width: 150px;
        }

li {
        position: relative;
        border: 1px solid #ffffff;
        }

li:hover {
        z-index: 1;
        cursor: pointer;
        }

ul ul {
        position: absolute;
        display: none;
        left: 140px;
        top: 4px;
        }

li:hover ul ul {
        display: none;
        }

li:hover ul, li:hover li:hover ul {
        display: block;
        }

    CSS, /, JS.

    +2

    More articles:


    All Articles