0

jqueryを使用して、ホバー時にサブメニューを作成しています。

ここにそれがどのように見えるかです：

<div id="menucontainer">
  <ul id = "topmenu">
    <li><a onmouseover="javascript:show('div_1');">menu_1</a></li>
    <li><a onmouseover="javascript:show('div_2');">menu_2</a></li>
    <li><a onmouseover="javascript:show('div_3');">menu_3</a></li> # fine with onmouseover since code is generated from templates

  </ul>
  <div id="div_1" class="submenu">
    <ul>
      <li> submenu_1 </li>
      <li> submenu_2 </li>
      <li> submenu_3 </li>
    </ul>
  </div>
  <div id="div_3" class="submenu">
    <ul>
      <li> submenu_1 </li>
      <li> submenu_2 </li>
      <li> submenu_3 </li>
    </ul>
  </div>
  <div id="div_3" class="submenu">
    <ul>
      <li> submenu_1 </li>
      <li> submenu_2 </li>
      <li> submenu_3 </li>
    </ul>
  </div>
</div>
<style>
#topmenu {
  list-style: none;
}
#topmenu > li {
  display: inline-block;
}
.submenu {
  display: none;
}

<script>
function show(divid) {
  $('.submenu').css('display', 'none');
  $('#'+divid).css('display', 'block');
}
</script>

問題は、show(div)が呼び出されてサブメニュー div が表示されると、「menucontainer」の後に別の div があり、その div が表示された div へのクリックをブロックすることです。どうすればこれを解決できますか?

4

1 に答える 1

0

簡単にするために、HTML を少し再構成しました。また、インライン関数呼び出しよりもイベント リスナーを使用することをお勧めします。あなたの場合、これについて何かうまくいかない場合はお知らせください。

http://jsfiddle.net/Dn2mv/5

<div id="menucontainer">
    <ul id="topmenu">
        <li><a href="#">menu_1</a></li>
        <li><a href="#">menu_2</a></li>
        <li><a href="#">menu_3</a></li>
    </ul>
    <div id="div_1" class="submenu">
        <ul>
            <li>submenu_1</li>
            <li>submenu_1</li>
            <li>submenu_1</li>
        </ul>
    </div>
    <div id="div_2" class="submenu">
        <ul>
            <li>submenu_2</li>
            <li>submenu_2</li>
            <li>submenu_2</li>
        </ul>
    </div>
    <div id="div_3" class="submenu">
        <ul>
            <li>submenu_3</li>
            <li>submenu_3</li>
            <li>submenu_3</li>
        </ul>
    </div>
</div>

$('#topmenu li a').hover(function () {
    var myItem = $(this).parents('li').index() + 1;
    $('#div_' + myItem).slideDown();
}, function () {
    $('.submenu').hide();
});
于 2013-02-24T15:39:42.950 に答える