内嵌列表与嵌套ul滑动切换强制li显示为块项

Question

嗨我有一个ul列表，其中包含与我用来创建过滤器系统的复选框的输入。我用jQuery隐藏嵌套的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

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