如何打开/关闭jquery下拉列表

时间:2015-08-12 21:32:21

标签: javascript jquery css drop-down-menu

我的项目是一个下拉选项(这里是国家)而不是链接,它必须像一个带有一些选项的选择

当我只有一个下拉列表时,我的下拉列表有问题,一切正常, 但是我的项目中有4个,当我打开/关闭下拉列表或者在我的下拉列表中做出选择时,我会看到一些反应。 不关闭或只关闭一个和其他下拉保持打开状态 李留但不满足

我的代码在这里了解更多详情

$(document).ready(function(){
var $container = $('.dropdown-menu'),
    $list = $('.dropdown-menu ul'),
    listItem = $list.find('li');

$(".dropdown .title").click(function () {
    if($container.height() > 0) {
        closeMenu(this);
    } else {
        openMenu(this);
    }
});

$(".dropdown-menu li").click(function () {
    closeMenu(this);
});

function closeMenu(el) {
    $(el).closest('.dropdown').toggleClass("closed").find(".title").text($(el).text());
  $(el).next().css("height", 0);
    $list.css( "top", 0 );
}

function openMenu(el) {console.log(el);
    $(el).parent().toggleClass("closed");

    $(el).next().css({
        height: 200
    })
        .mousemove(function(e) {
        var heightDiff = $list.height() / $container.height(),
            offset = $container.offset(),
            relativeY = (e.pageY - offset.top),
            top = relativeY*heightDiff > $list.height()-$container.height() ?
            $list.height()-$container.height() : relativeY*heightDiff;

      //  $list.css("top", -top);
    });
}
});

https://jsfiddle.net/yuki95/0wo01j8y/

感谢您的帮助。

3 个答案:

答案 0 :(得分:0)

我会更简单

<https://jsfiddle.net/0wo01j8y/1/>

我希望这有助于你

答案 1 :(得分:0)

我会这样做:

series = pd.Series([l.get_results() for l in b_list])

答案 2 :(得分:0)

我认为不一致的行为是由这一行引起的

if($container.height() > 0) {

尝试检查closed课程

if($(this).closest('.dropdown').hasClass("closed")) {

AudioTalks

<强>更新

为了关闭其他下拉列表,请更改此

$(el).next().css("height", 0);

到这个

$(el).closest('.dropdown').find('.title').next().css("height", 0);

并向openMenu函数添加代码,为所有其他已关闭的菜单调用closeMenu

$('.dropdown:not(.closed) .title').not(el).each(function(){
    closeMenu(this);
});

Demo