jQuery写的下拉菜单响应异常。怎么写成正常的？

h1的点击下拉菜单页面载入时需要点击两下之后才会响应。
怎么写成正常的？即页面载入时第一次点击就响应。

<style>
h1{ margin:0; font-size:16px;}
.list{ width:200px;}
.list h1{ text-align:center; line-height:30px; background-color:#09F;}
.li{ height:200px; text-align:center; background:#0CF; display:block;}
</style>
<div class="list">
    <h1>列表头</h1>
    <a href="" class="li">列表项</a>
</div>
<script>
$(".li").hide()
$(".list h1").toggle(function(){
    $(this).next().hide();}, function(){$(this).next().show();
    })
</script>