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-category中的主要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;
}

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

1 个答案: