javascript - 兄弟を隠す

Question

$('#navigation li.parent').mouseover(function () {
    $('#news-ticker').hide();
    $('ul.child', this).slideDown();
});
$('#navigation .child').mouseleave(function () {
    setTimeout(function(){
        $(this).hide();
        $('#news-ticker').slideDown();
    },2000);
});

...ほとんど機能しますが、問題は1つだけです。サブナビの兄弟を非表示にするにはどうすればよいですか? 私が行う$('ul.child', this).slideDown().siblings().hide();と、親全体が非表示になります。

Answer 1

試す：

$('#navigation li.parent').mouseover(function () {
  $('#news-ticker').hide();
  $(this).parent().find("ul.child").not($('ul.child', this)).hide();
  $('ul.child', this).slideDown();
});
$('#navigation .child').mouseleave(function (e) {
  setTimeout(function(){
      $(this).hide();
      $('#news-ticker').slideDown();
  },2000);
  e.stopPropagation();
});

Answer 2

開きたい要素を表示する前に、すべての要素を非表示にするだけです。

$('ul.child', this).hide();
$('ul.child', this).slideDown();

Answer 3

slideDownメソッドでは、次のように2つのパラメーターを指定できると思います。

slideDown(500,function(){$(this).fadeOut(500,function(){$(this).hide();});});

1つ目は間隔、2つ目はコールバック関数です。終了すると呼び出される関数。しかし、あなたのコードでは、次のhover方法を使用することをお勧めします。

$('#navigation li.parent').hover(function(){
    //on mouse enter
    $('#news-ticker').hide();
    $('.child', this).slideDown(500);
},function(){
    //on mouse leave
    $('#new-ticker').slideDown(500,function(){$('.child',this).hide();});
});

htmlなしで何をしているのかを理解するのは少し難しいです。ごめん。