.slideToggle();がリロード時に開きっぱなしになってしまう

Question

$(window).load(function () {
$('#head > #tbl > nav > ul > li.trigger').hover(function(){
$(this).children('.sub-menu').stop().slideToggle();
});
});

ロード時に「li.trigger」にマウスを当てたままにすると、読み込みのタイミングにより「.sub-menu」が開きっぱなしになってしまい、想定の動作の逆になってしまいます。

ご教授願います。

Answer 1

hoverで処理を開始させないようにすれば良いと思います。

Answer 2

状況がわかりません

<script>
$(function(){
  $('#head > #tbl > nav > ul > li.trigger').on('mouseover mouseout',function(){
    $(this).children('.sub-menu').stop().slideToggle();
  }).find('.sub-menu').hide();
});
</script>
<div id="head">
  <div id="tbl">
    <nav>
      <ul>
        <li class="trigger">
          <span>hoge1</span>
          <ul class="sub-menu">
            <li>hoge1-1</li>
            <li>hoge1-2</li>
            <li>hoge1-3</li>
          </ul>
        </li>
        <li class="trigger">
          <span>hoge2</span>
          <ul class="sub-menu">
            <li>hoge2-1</li>
            <li>hoge2-2</li>
            <li>hoge2-3</li>
        </ul>
        </li>
      </ul>
    </nav>
  </div>
</div>