內嵌列表與嵌套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; 
}