jquery - 在滑动切换上带有嵌套 ul 的内联列表强制 li 显示为 block 项

Question

您好，我有一个 ul 列表，其中包含我用来创建过滤系统的带有复选框的输入。我正在使用 jquery 隐藏嵌套的 uls 并使用滑动切换来取消隐藏它们。我有内联的主要 uls 列表，但是当我滑动切换时，它们被强制作为 block 元素。我希望他们保持一致，但我似乎无法强制他们。

我的架构是这样的:

<ul class="top-category">
    <li class="expandable closed">Filter by: Blog Categories <span class="icon-arrow-down3"></span>

        <ul class="child-category">
            <li class="expandable closed">  <span><input type="checkbox" id="tag_278" name="blog_categories[]" class="custom-checkbox" value="Tech" data-name="Tech"/>Tech</span></li>
             <li class="expandable closed"> <span><input type="checkbox" id="tag_278" name="blog_categories[]" class="custom-checkbox" value="Tech" data-name="Tech"/>Asset Production</span></li>
              <li class="expandable closed">    <span><input type="checkbox" id="tag_278" name="blog_categories[]" class="custom-checkbox" value="Tech" data-name="Tech"/>Design</span></li>
        </ul>
    </li>
    <li class="expandable closed">Filter by: Staff <span class="icon-arrow-down3"></span>

        <ul class="child-category">
            <li class="expandable closed">  <span><input type="checkbox" id="tag_283" name="staff[]" class="custom-checkbox" value="Staff One" data-name="Staff One"/>Staff One</span></li>
            <li class="expandable closed">  <span><input type="checkbox" id="tag_283" name="staff[]" class="custom-checkbox" value="Staff One" data-name="Staff One"/>Staff Memeber Two</span></li>
            <li class="expandable closed">  <span><input type="checkbox" id="tag_283" name="staff[]" class="custom-checkbox" value="Staff One" data-name="Staff One"/>Staff Memeber THree</span></li>
        </ul>
    </li>
</ul>

我的 CSS 是这样的:

ul.top-category {
    list-style-type:none;
}
ul.top-category li.expandable {
    display:inline;
}

我有 jQuery 负责切换:

// bind focus and blur of checkboxes and navigation keys
$('li.expandable').each(
    function (i, li) {
        li = $(li);
        li.find('input')
            .focus(function () {
                $('.active').removeClass('active'); 
                li.toggleClass('active');})
            .blur(function () {
                li.toggleClass('active');})
            .on('keyup', function (e) {
                if (e.keyCode == '40') { // down
                    li.next('li.expandable').find('input').focus()
                } else if (e.keyCode == '38') { // up
                    li.prev('li.expandable').find('input').focus()
                }})
})

// fold all those with class closed
$('li.expandable.closed').children('ul').hide()

// li click
$('li.expandable').on('click', function (e) {
    e.stopPropagation();
    var $li = $(this);
    //$li.find('input').focus()
    $('.active').removeClass('active');
    $li.addClass('active');
    $li.children('ul').slideToggle('fast').toggleClass('open');
    if (e.target.nodeName !== 'INPUT') {
        var cbx = $li.children('input');
        cbx.prop('checked', !cbx.prop("checked"))
    }
});

// set focus to first checkbox
$('li.expandable > input').first().focus()

但是当我切换 ul.top 类别中的主要 li 时，没有内联记录器。有谁知道修复方法或者我可以更改布局以使其更好的方法吗？

我有一个 JSFiddle 来演示它是如何响应的 JSFIDDLE

Answer 1

检查 DEMO

ul.top-category {
display:inline-block;
float: left;
list-style-type:none;
position: relative;
}
ul.top-category li.expandable {
display:inline;
}

ul.child-category {
position: absolute;
top: 20px;
left: 0;
}