與單獨的容器

Question

jQuery的下拉我有這樣的結構：

<div class="menu"> 
    <ul> 
     <li><a href="/dropdown1">item1</a></li> 
     <li><a href="/dropdown1">item2</a></li> 
     <li><a href="/dropdown1">item3</a></li> 
    </ul> 
</div> 
<div class="submenu"> 
    <div class="dropdown1">content1</div> 
    <div class="dropdown2">content2</div> 
    <div class="dropdown3">content3</div> 
</div> 

子菜單的內容是無形的，CSS：

.submenu div{display:none;} 

與jQuery我要當懸停在項目（。菜單UL li a） 1.取屬性href不帶'/'並且顯示相同名稱div from .submenu。 2.添加類「有效」項（。菜單UL立一個）

而隱藏此DIV如果鼠標出從該容器或菜單項和刪除類「活性」（像經典下拉菜單）

這撥弄http://jsfiddle.net/jzj5wub6/

Answer 1

你也可以把它這樣

Js Fiddle

$('.menu a').hover(function() { 
    var a = $(this).attr('href').slice(1) // taking the href value and removing/
    $('.submenu div').removeClass('active'); 
    $('.submenu .' + a).addClass('active') 
}) 

$('.menu a').on('mouseleave', function(){ 
    $('.submenu div').removeClass('active'); 
}) 

編輯

JS Fiddle

$('.menu a').hover(function() { 
    var a = $(this).attr('href').slice(1) 
    $('.submenu div').removeClass('active'); 
    $('.submenu .' + a).addClass('active') 
}) 

$('.submenu div').on('mouseleave', function() { 
    $('.submenu div').removeClass('active'); 
}) 

Answer 2

給你一個解決方案http://jsfiddle.net/jzj5wub6/4/

$('.menu a').on({ 
    mouseenter: function() { 
     var link = $(this).attr('href').substring(1); 
     $(this).addClass('active'); 
     $('.submenu').find('.' + link).show(); 
    }, 
    mouseleave: function() { 
     var link = $(this).attr('href').substring(1); 
     $(this).removeClass('active'); 
     $('.submenu div').hide(); 
    }, 
    click: function (e) { 
     e.preventDefault(); 
    } 
}); 

$('.submenu div').on({ 
    mouseenter: function() { 
     var link = $(this).attr('class'); 
     $('.menu a[href="/'+link+'"]').addClass('active'); 
     $(this).show(); 
    }, 
    mouseleave: function() {   
     $('.menu a').removeClass('active'); 
     $('.submenu div').hide(); 
    } 
}); 

Answer 3

嘗試

jQuery(function ($) { 
 
    $('.menu a').click(function(){ 
 
     e.preventDefault(); 
 
    }) 
 
    $('.menu li').hover(function() { 
 
     var $target = $('.'+$(this).find('a').attr('href').substring(1), '.submenu'); 
 
     clearTimeout($target.data('hoverTimer')); 
 
     $target.stop(true, true).slideDown(500); 
 
    }, function() { 
 
     var $target = $('.'+$(this).find('a').attr('href').substring(1), '.submenu'); 
 
     var timer = setTimeout(function() { 
 
      $target.stop(true, true).slideUp(); 
 
     }, 200); 
 
     $target.data('hoverTimer', timer); 
 
    }); 
 

 
    $('.submenu > div').hover(function() { 
 
     clearTimeout($(this).data('hoverTimer')); 
 
    }, function() { 
 
     $(this).stop(true, true).slideUp(); 
 
    }); 
 
});

.menu ul { 
 
    display:block; 
 
    width:100%; 
 
    height:30px; 
 
    list-style:none; 
 
} 
 
.menu li { 
 
    float:left 
 
} 
 
.menu a { 
 
    background:gray; 
 
    padding:5px; 
 
    margin-right:1px 
 
} 
 
.submenu div { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="menu"> 
 
    <ul> 
 
     <li> 
 
      <a href="/dropdown1">item1</a> 
 
     </li> 
 
     <li> 
 
      <a href="/dropdown2">item2</a> 
 
     </li> 
 
     <li> 
 
      <a href="/dropdown3">item3</a> 
 
     </li> 
 
    </ul> 
 
</div> 
 
<div class="submenu"> 
 
    <div class="dropdown1">content1</div> 
 
    <div class="dropdown2">content2</div> 
 
    <div class="dropdown3">content3</div> 
 
</div>