在幻灯片上嵌套 ul 的内联列表切换强制 li 显示为块项目

Question

嗨，我

有一个 ul 列表，其中包含我用来创建过滤系统的复选框的输入。我正在使用jquery隐藏嵌套的uls，并使用滑动切换来取消隐藏它们。我有内联的主 uls 列表，但当我滑动切换时，它们被强制作为块项目。我希望他们保持排队，但我似乎不能强迫他们。

我的架构是这样的：

<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

查看演示

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