使用JQuery创建移动子导航菜单下拉列表

Question

我正在尝试在我创建的网站上创建一个移动友好的导航视图。我想在li的旁边有一个下拉（向下箭头）图标，其中包含“haschildMobile”类，其中隐藏了“mobileSubLevel”类中的项目。然后当人们点击“haschildMobile”项时，“mobileSubLevel”中的下拉项显示。

我尝试了几种不同的方法来使用CSS和jQuery来解决这个问题（包括这篇文章中包含的代码），但无济于事。有什么想法吗？

$(function(){
    $('.haschildMobile').click(function() {
      $(this).('.mobileSubLevel').toggle();
    $('.mobileSubLevel').not($(this).siblings()).hide();
      e.stopPropagation();
    });
    $('html').click(function() {
      $('.mobileSubLevel').hide();
    });
})

#dnnMobileMenu .mobileTopLevel { 
position: relative; 
height: auto; 
margin: 0; 
padding: 0; 
}
#dnnMobileMenu .mobileTopLevel li a {
display: inline-block;
color: #999;
font-size: 13px;
}
#dnnMobileMenu .mobileTopLevel li a span { 
display: inline-block; 
height: 42px; 
line-height: 42px; 
margin: 0; 
padding: 0 15px; 
text-transform: uppercase; 
}
#dnnMobileMenu .mobileTopLevel li { 
position: relative; 
list-style-type: none; 
float: none; 
width: 100%; 
border-top: 1px solid #e1e1e1; 
}
li.haschildMobile:after { 
padding-left: 4px; 
content: ' v'; 
}
#dnnMobileMenu .mobileSubLevel li { 
display: none; 
}

<div id="dnnMobileMenu">
<ul class="mobileTopLevel">

<li class="itemMobile firstMobile breadcrumbMobile selectedMobile">

<a href="#"><span>Home</span></a>

</li>

<li class="itemMobile haschildMobile">

<a href="#"><span>Dropdown Area</span></a>

<div class="mobileSubLevel">
<ul>

<li class="itemMobile firstMobile">

<a href="#"><span>Item 1</span></a>

</li>

 <li class="itemMobile">

<a href="#"><span>Item 2</span></a>

</li>

<li class="itemMobile">

<a href="#"><span>Item 3</span></a>
</li>
</ul>
</div>
</ul>

</div>