jQuery-手机上的Accordian / Dropdown标签

Question

寻求帮助。我在jQuery方面工作不多，我试图创建一些标签，这些标签会折叠到移动设备的下拉菜单中。我已经创建了一些代码，但是我遇到了错误，而且我不太确定哪里出了问题。

如果有人可以看一下并帮助我理解我所遇到的一些错误，我将不胜感激！

HTML：

<div class="mainTabs">
    <ul class="tabs">
            <li class="tab active">
                <a href="#">
                    <span class="label">Tab 1</span>
                </a>
            </li>
            <li class="tab ">
                <a href="#">
                    <span class="label">Tab 2</span>
                </a>
            </li>
            <li class="tab ">
                <a href="#">
                    <span class="label">Tab 3</span>
                </a>
            </li>
            <li class="tab ">
                <a href="#">
                    <span class="label">Tab 4</span>
                </a>
            </li>
    </ul>
</div>

jQuery：

$(function(){
$('li.tab').click(function(){
    var tab = $(this);
    tab.addClass('active').siblings('.tab').removeClass('active');
    var target = tab.attr('data-target');
    if(target.length){
        $(target).fadeIn().siblings('.tabContent').hide();      
    }
});

$('.mainTabs li.active').click(function(){
    if($(this).offset().top != $(this).next().offset().top + $('#header').height()){
        $(this).siblings('.tab').slideToggle();
        $(this).closest('.tabs').toggleClass('active');
    }
});
});

错误：

Uncaught TypeError: Cannot read property 'length' of undefined.