1

スコープ外の問題など、ある種の変数があります。以下の関数では、マウスが入っているか出ているかに基づいてタイムアウトを作成またはクリアしています。ただし、タイムアウトが作成された後でも、再入力時に未定義が返されるようです。私がここで何を間違っているのかわからない、あなたの助けに感謝します！

jsFiddleの例

JavaScript:(特定の問題はelse35行目の条件付きです

var navLinks = $('nav li.sub');

navLinks.mouseenter(function(){

  console.log('hovering on link');

  var thiis   = $(this),
      subList = thiis.find('ul'),
      autoClose;

  if (!thiis.hasClass('out')){

    console.log('isnt out');

    /* Link */

    thiis

    /* Show submenu when entering link */

    .addClass('out')

    /* Hide submenu when exiting link */

    .mouseleave(function(){

      autoClose = setTimeout(function(){

        thiis.removeClass('out');
      }, 1000);


      console.log('exiting link: timeout active', autoClose);
    });
  } else {

    console.log ('is out', autoClose);

    if (autoClose){

      console.log('is out: clear timeout');

      clearTimeout(autoClose);
    }
  }
});
4

3 に答える 3

0

質問へのコメントで指摘されているように、マウスがアイテムをホバーするたびに新しいタイムアウトがあります。すべてのアイテムに対して新しいタイムアウト変数を作成しましょう。

$('nav li:has(ul)').each(function(){
  var par = $(this),
      sub = $("> ul", this),
      closeTO;

  par.hover(
    function(){
      clearTimeout(closeTO);
      par.addClass("out");
    },
    function(){
      closeTO = setTimeout(function(){
        par.removeClass("out");        
      }, 1000);
    }
  );
});

http://jsfiddle.net/ByuG3/1/

于 2013-01-15T02:59:11.773 に答える
0

タイムアウトや間隔の参照など、いくつかの変数を格納するには、グローバルオブジェクトを使用する必要があります。たとえば、次のようなオブジェクトを宣言できます。

// Declare the context object in the global scope
var myContext = {
    "myTimeout" : false
}

次に、mouseenterおよびmouseleaveハンドラー関数でコンテキストオブジェクトを使用します。

于 2013-01-15T03:01:56.760 に答える
0

テクノ、

簡単な答えはvar autoClose、外側のスコープに移動することですが、もっと多くのことができる（そしてすべきである）と思います。

すなわち、

  • mouseleaveハンドラーをハンドラー内にアタッチしたくないと思いますmouseenter。最初から恒久的に取り付けることができます。
  • mouseenterハンドラー内で、clearTimeout(autoClose)無条件にthiis.addClass('out')実行できます。テストには実体経済はありません.hasclass('out')。

これを試して ：

var navLinks = $('nav li.sub');
var autoClose;
navLinks.hover(function(){
    var thiis = $(this);
    clearTimeout(autoClose);
    thiis.addClass('out');
}, function(){
    var thiis = $(this);
    autoClose = setTimeout(function(){
        thiis.removeClass('out');
    }, 1000);
});
于 2013-01-15T03:05:02.730 に答える