我怎样才能运行 jquery 下拉菜单 open/close

Question

我的项目是一个带有选项（这里是国家）而不是 link 的下拉列表，它必须像 select 一样带有一些选项

当我只有一个下拉菜单时，我的下拉菜单出现问题，一切正常，但我的项目中有 4 个，当 Open/close 下拉菜单或我在下拉菜单中做出选择时，我会看到一些反应。不关闭或仅关闭一个而其他下拉菜单保持打开状态李留下但不满足

我的代码在这里以获取更多详细信息

$(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/

感谢您的帮助。

Answer 1

我会让它更简单

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

希望对你有帮助

Answer 2

我会这样做：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="jquery.min.js" type="text/javascript"></script>
</head>
<body>

<style>
    #nav li ul {
        display: none;
    }
</style>

<div id="nav">
    <li><a href="javascript:void(0)">Subject</a>
        <ul>
            <li><a href="">Subject</a></li>
        </ul>
    </li>
    <li><a href="">Subject</a></li>
    <li><a href="javascript:void(0)">Subject</a>
        <ul>
            <li><a href="">Subject</a></li>
        </ul>
    </li>
    <li><a href="">Subject</a></li>
</div>

<script>

$(document).ready(function() {

    $('#nav li a').click(function() {

        $('#nav li ul').hide();

        $(this).next('ul').fadeIn();

    });

});

</script>

</body>
</html>

Answer 3

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

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

尝试检查 closed class 而不是

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

Demo

更新

为了关闭其他下拉菜单，改变这个

$(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);
});

https://jsfiddle.net/e81Lemmg/

我怎样才能运行 jquery 下拉菜单 open/close

How can I run jquery dropdown open/close

javascript

css

jquery

drop-down-menu

我怎样才能 运行 jquery 下拉菜单 open/close

How can I run jquery dropdown open/close

javascript

css

jquery

drop-down-menu

我怎样才能运行 jquery 下拉菜单 open/close