1

I have 2 navigation areas. The second should appear when an element in the first is hovered over and it should disappear if the mouse does not move over it.

Very basically i have:

HTML

<ul class="main">
 <li class="1">item 1</li>
 <li class="2">item 2</li>
</ul>

<div class="sub">
 <ul class="1">
  <li>1 sub item 1</li>
  <li>1 sub item 2</li>
 </ul>

 <ul class="2">
  <li>2 sub item 1</li>
  <li>2 sub item 2</li>
 </ul>
</div>

I want ul.1 to appear when I hover over li.1 and ul.2 to appear when I hover over li.2, and I want them both to disappear only when I am not hovering over the sub uls.

I've got it working part way:

JAVASCRIPT

var sections = new Array('1', '2');

$.each(sections, function(i, section) {
    $('ul.main li.' + section).hover(
        function() {
            $('div.sub ul').hide();
            $('div.sub ul.' + section).show();
        }
    );
});

This will show the correct section and hide the others, but I can't figure out how what I need so that, when the mouse moves off a ul.main li, the .sub ul disappears if it's not being hovered over.

Update: Fiddle here: http://jsfiddle.net/alluvialplains/XY4mH/

4

2 に答える 2

0 
$( document ).ready( function () {
  $( '.main li' ).on( 'click', function () {
    $( '.sub ul' )
      .hide()
      .eq( $( this ).index() )
        .show();
  });
});

That should do the trick. But as @Mottie said, nesting menus would work better / more symantecly

Edit: Sorry this is working on click. Just a sec and I'll have it updated

$( document ).ready( function () {
    var $ul = $( '.sub ul' ).hide();
    $( '.main li' ).hover(
        function () {
            $ul
                .hide()
                .eq( $( this ).index() )
                    .show();
        },
        function () {
            $ul.hide()
        }
    );
});
于 2013-02-18T22:29:58.940 に答える
0

You're part of the way there @EpF. The problem is that your semantic example given above (which is possible to adhere to) is trying to capture a mouseleave event and while it's possible to use jQuery's .not() function to achieve this, it would be expensive. Really, the smartest way to do this is to have an outer wrapper for your whole navigation (wrapping all div's you've got in your existing fiddle) and then bind your show() event to mouseenter, while separately binding your .hide() event (the one for ALL .subz) to an event triggered on mouseleave for the wrapper div.

Given the following HTML:

<div id="nav-wrap">
    <ul class="mainz">
     <li class="1">item 1</li>
     <li class="2">item 2</li>
    </ul>

    <div class="subz">
     <ul class="1">
      <li>1 sub item 1</li>
      <li>1 sub item 2</li>
     </ul>

     <ul class="2">
      <li>2 sub item 1</li>
      <li>2 sub item 2</li>
     </ul>
    </div>
</div><!-- /END #nav-wrap -->

You can achieve the effect with the following javascript

$( document ).ready( function () {
    var $ul = $( '.subz ul' ).hide();
    $( '.mainz li' ).on( 'mouseenter', function(event){
            $ul.hide().eq( $( this ).index() ).show();
    });
    $( '#nav-wrap' ).on( 'mouseleave', function(event){
        $ul.hide();
    });
});

Here is a JSFiddle of it in action: http://jsfiddle.net/XY4mH/4/

Also, I should note that the .hover() function is deprecated in jQuery for quite a while now and could disappear sometime soon. Note that I used the .on() function, which is the correct way to bind these kinds of events in jQuery.

于 2013-02-18T23:49:44.667 に答える