Question

我有一个左侧菜单，它有多个父菜单，下面是某些子菜单。我想为这些菜单提供类似于手风琴的功能。就像我选择一个菜单项一样，它的子菜单将变为可见（slideDown动画），活动父菜单的子菜单将隐藏（slideUp动画）。除此功能外，所选菜单将始终位于顶部，其他菜单将位于其下方。

以下是相同的代码段：

＆＃13;

$(document).ready(function(){
$('.dropdown').find('li:eq(0)').addClass('active');
    $('.dropdown').find('[data-id="parentmenu"]').each(function () {
        if ($(this).hasClass('active') == false) {
            $(this).find('ul').slideUp(10);
        }
    });
    $('ul.dropdown').on('click', '[data-id="parentmenu"]', function () {
        $(this).siblings('[data-id="parentmenu"]').removeClass('active');
        $(this).siblings('[data-id="parentmenu"]').each(function () {
            $(this).find('ul').slideUp(500);
        });
        $(this).addClass('active');
        $(this).find('ul').show().slideDown(500);
        $markupHTML = "<li data-id='parentmenu'>" + $(this).html() + "</li>";
        $($markupHTML).insertBefore($('.dropdown').find('li:eq(0)'));
        $(this).remove();
    });

});

＆＃13;

ul.dropdown {
    margin: 0;
    padding: 0;
}
.dropdown {
    font-size: 14px;
    height: 20px;
    width: 203px;
}
ul.dropdown li a {
    color: #7f7f7f;
    display: block;
    font-size: 13px;
    font-weight: bold;
    padding-bottom: 7px;
    text-decoration: none;
}
ul.dropdown li {
    border-bottom: 2px solid #91a6ca;
    list-style: outside none none;
    margin-bottom: 7px;
}
#left_panel {
    background-color: #fff;
    float: left;
    min-height: 700px;
    min-width: 230px;
    padding: 15px 3px;
    width: 12%;
}
.ui-resizable {
    position: relative;
}
.vdr-left-nav {
    float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vdr-left-nav ui-resizable" id="left_panel">
<ul class="dropdown">
    <li data-id="parentmenu" class="active">
        <a title="" href="#" class="snacks"> Menu 1</a>
        <ul>
            <li data-id="childmenu"> <a href="#">Child Menu 1</a></li>
            <li data-id="childmenu"> <a href="#">Child Menu 2</a></li>
        </ul>
    </li>
    <li data-id="parentmenu">
        <a title="" href="#" class="snacks"> Menu 2</a>
        <ul >
            <li data-id="childmenu"><a href="#">Child Menu 3</a></li>
            <li data-id="childmenu"><a href="#">Child Menu 4</a></li>
        </ul>
    </li>
    <li data-id="parentmenu">
        <a title="" href="#" class="snacks"> Menu 3</a>
        <ul >
            <li data-id="childmenu"><a href="#">Child Menu 5</a></li>
            <li data-id="childmenu"><a href="#">Child Menu 6</a></li>
        </ul>
    </li>
</ul>
</div>

＆＃13;

代码几乎正常工作，除了我无法使slideDown动画适用于最常选择的菜单项。刚显示所选菜单，动画根本不起作用。

还尝试使用$(this).find('ul').slideDown(500).show();，但这也无效。我做错了什么？

任何帮助将不胜感激。

以下是同样的Fiddle。

Answer 1

我认为你的代码还可以，但是在slideDown（）调用show（）并添加新的li元素内容之前发现了一些小错误，所以你需要在添加top之后显示第一个元素向下滑动。

$(document).ready(function(){
$('.dropdown').find('li:eq(0)').addClass('active');
    $('.dropdown').find('[data-id="parentmenu"]').each(function () {
        if ($(this).hasClass('active') == false) {
            $(this).find('ul').slideUp(10);
        }
    });
    $('ul.dropdown').on('click', '[data-id="parentmenu"]', function () {
        $(this).siblings('[data-id="parentmenu"]').removeClass('active');
        $(this).siblings('[data-id="parentmenu"]').each(function () {
            $(this).find('ul').slideUp(500);
        });
        $(this).addClass('active');
        //$(this).find('ul').show().slideDown(500);

        $markupHTML = "<li data-id='parentmenu'>" + $(this).html() + "</li>";
        $($markupHTML).insertBefore($('.dropdown').find('li:eq(0)'));
        $(this).remove();
        $('.dropdown').find('li:eq(0)').find('ul').slideDown(500);
    });

});

https://jsfiddle.net/w0d8sdvo/3/

Answer 2

我怀疑$ markupHTML重写非常可能让你的动画无法工作......因为它正在创建/重写DOM元素。

作为旁注，我发现菜单项的顺序从用户体验的角度来看，可用性很差。

动态生成菜单的动画无法正常工作

2 个答案: