Question

我制作了一个代码，但我遇到了一些问题，当我的鼠标正在进行时，“类别1”显示我的框，如果鼠标是从类别1按钮的Box ID，我成功了工作，但如果从类别i移动鼠标不同的地方不隐藏我的盒子...希望有人可以帮助我解决这个问题和我还需要什么，如果它可能当鼠标离开菜单按钮和类别之前隐藏框等待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

试试这个Link

在显示正确的子菜单之前，只需隐藏所有子菜单

$(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();
            }

        });

下拉菜单“Mouseleave”

2 个答案: