带有单独容器的jquery下拉菜单

Question

我有这样的结构：

<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 (.menu ul li a) 1. 获取不带'/'的属性href，并从.submenu 中显示相同的名称​​div。 2. 将class 'active' 添加到item (.menu ul li a)

如果将鼠标从该容器或菜单项中移出并删除“活动”类（如经典下拉菜单），则隐藏此 div

这个小提琴http://jsfiddle.net/jzj5wub6/

Answer 1

试试

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>

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

你也可以这样做

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