jquery dropdown with separate container

问题

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/

回答1:

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

回答2:

Try

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>

回答3:

Here you are a solution 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();
    }
});

来源：https://stackoverflow.com/questions/26212967/jquery-dropdown-with-separate-container