默认情况下使用jquery隐藏子菜单，然后单击子菜单显示和隐藏

这是我的html代码

<ul class="list">
    <li class="pagenav">
    <a title="Government" href="#">Government</a>
        <ul>
            <li class="page_item page-item-14"><a href="#">Code of Ordinances</a></li>
            <li class="page_item page-item-5267"><a href="#">Finance</a>
                <ul class="children">
                    <li class="page_item page-item-16"><a href="#">Fiscal Year</a></li>
                    <li class="page_item page-item-5280"><a href="#">Comprehensive</a></li>
                </ul>
            </li>
            <li class="page_item page-item-5267"><a href="#">Finance year</a>
                <ul class="children">
                    <li class="page_item page-item-16"><a href="#">Year</a></li>
                    <li class="page_item page-item-5280"><a href="#">Comprehensive year</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

然后像那样单击Finance show

Government

Code of Ordinances

Finance

Finance year

Government

Code of Ordinances

Finance

Fiscal Year

Comprehensive

Finance year

我的意思是，我想在默认情况下隐藏财务和财务年度的子菜单，然后单击财务和财务年度，此时子菜单显示和隐藏

<style>
  li.pageitem ul.children {
  display:none;
}
</style>

<script>
$('li.pageitem').click(function(){
  $(this).find('ul.children').toggle();
});
</script>

儿童{
显示：无；
}
$（'li.pageitem'）。单击（函数（）{
$（this.find（'ul.children'）.toggle（）；
});

儿童{
显示：无；
}
$（'li.pageitem'）。单击（函数（）{
$（this.find（'ul.children'）.toggle（）；
});

$('.page_item .children').hide(0);

$('.page_item').click(function(){
  if($('.children').hasClass('vis')){
    $('.children', this).removeClass('vis');
    $('.children', this).hide();       
  }else{
    $('.children', this).addClass('vis');
    $('.children', this).show();
  }
});