下拉菜單“ Mouseleave”

Question

我編寫了代碼，但是我有一些問題，當我的鼠標移到“類別1”上時，向我顯示該框，如果鼠標從“類別1”按鈕轉到“框ID”，則成功完成此操作，但是如果從類別我將鼠標移到其他位置不會隱藏我的盒子...希望有人可以幫助我解決此問題，並且當鼠標離開菜單按鈕和類別以隱藏該盒子等待1秒鍾時，如果可能的話，我仍然需要什么或2，如果在1或2秒內鼠標又回到框上以進行顯示

這是我現在制作的js代碼...

$(document).ready(function(){
 $("a[id*='DropDown_Menu_ID_']").hover(function() {
  var DropDown_ID        = $(this).attr("id");
  var ID_Split           = DropDown_ID.split('_');
  var Box_Data_ID        = ID_Split[3];

  var Button_Value       = $('#DropDown_Menu_ID_' + Box_Data_ID).attr("value");

  var count              = 0;

  count++;
  $('#DropDown_Box_ID_' + Box_Data_ID).show();



  $('#DropDown_Box_ID_' + Box_Data_ID).mouseleave(function() {
   count--;
   if (!count) {
    $('#DropDown_Box_ID_' + Box_Data_ID).hide();
   }
  });

 });
});

我將代碼放在這里： http : //jsfiddle.net/eANHr/

Answer 1

嘗試這個

http://jsfiddle.net/eANHr/1/

$(document).ready(function () {
            $("a[id*='DropDown_Menu_ID_']").hover(function () {

                var DropDown_ID = $(this).attr("id");
                var ID_Split = DropDown_ID.split('_');

                var Box_Data_ID = ID_Split[3];

                var Button_Value = $('#DropDown_Menu_ID_' + Box_Data_ID).attr("value");



                $('#DropDown_Box_ID_' + Box_Data_ID).show();
            })
            $("a[id*='DropDown_Menu_ID_']").mouseleave(function () {


                var DropDown_ID = $(this).attr("id");
                var ID_Split = DropDown_ID.split('_');

                var Box_Data_ID = ID_Split[3];
                $('#DropDown_Box_ID_' + Box_Data_ID).hide();



            });
        });

Answer 2

試試這個鏈接

在顯示正確的子菜單之前，只需隱藏所有子菜單

$(document).ready(function () {
            $("a[id*='DropDown_Menu_ID_']").hover(function () {
                hideAll();

                var DropDown_ID = $(this).attr("id");
                var ID_Split = DropDown_ID.split('_');
                var Box_Data_ID = ID_Split[3];

                var Button_Value = $('#DropDown_Menu_ID_' + Box_Data_ID).attr("value");

                var count = 0;

                count++;
                $('#DropDown_Box_ID_' + Box_Data_ID).show();

                $('#DropDown_Box_ID_' + Box_Data_ID).mouseleave(function () {
                    count--;
                    if (!count) {
                        $('#DropDown_Box_ID_' + Box_Data_ID).hide();
                    }
                });

            });

            function hideAll() {
                $('div[id^="DropDown_Box_ID"]').hide();
            }

        });