jQuery的下拉与单独的容器 [英] jquery dropdown with separate container

问题描述

我有这样的结构：

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

我希望将鼠标悬停在项目上（ .menu ul li a ）
1.不带'/'的属性 href 并显示相同的名称div 来自.submenu。
2.将class'active'添加到item（ .menu ul li a ）

并隐藏这个 div 如果从此容器或菜单项中移出并删除类活动（如经典下拉菜单）

此小提琴 http://jsfiddle.net/jzj5wub6/

解决方案

你也可以这样做

Js Fiddle

  $（'。menu a'）。hover（function ）{
 var a = $（this）.attr（'href'）。slice（1）//获取href值并移除/ 
 $（'。submenu div'）。removeClass（'主动'）; 
 $（'。submenu。'+ a）.addClass（'active'）
}）
 
 $（'。menu a'）。on 'mouseleave'，function（）{
 $（'。submenu div'）.removeClass（'active'）; 
}）
  

编辑

JS小提琴

$ b $

  $（'。menu a'）。hover（function（）{
 var a = $（this）.attr（' href'）。slice（1）
 $（'。submenu div'）。removeClass（'active'）; $（'。submenu div'）。（'mouseleave'，'。'）。
 $（'。submenu。'+ a）.addClass（'active'）
}）
 
 $函数（）{
 $（'。submenu div'）。removeClass（'active'）; 
}）
  

I have a structure like this:

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

Submenu content is invisible, css:

.submenu div{display:none;}

With jquery I want to when hover on item (.menu ul li a) 1. take attribute href without '/' and show same name div from .submenu. 2. add class 'active' to item (.menu ul li a)

And hide this div if mouse out from this container or menu item and remove class 'active' (like classic dropdown menu)

This fiddle http://jsfiddle.net/jzj5wub6/

解决方案

you can also make it this way

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

Edit

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

这篇关于jQuery的下拉与单独的容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！