jquery - 单级联下拉(替代 ASP.net 中使用的)

Question

我一直在研究单个级联选择下拉菜单，它是 ASP.net 中使用的标准级联下拉菜单的替代方法。 问题是我已经实现了一半，但无法正确处理悬停事件。

现在我唯一需要做的就是在鼠标移出时隐藏二级菜单。 我使用了 ("classname:hover").length 但这并不总是有效。

引用图片:

请在上述网址中找到插件 http://jsfiddle.net/nakul2111/deb0q5s8/

<div class='custom'></div>
<br><br>
<input type='text' >
<div class='drop'>

<ul class='ul-lev-1 ul'>
  <li class='li-lev-1' data-attr='oo1'>India<span class='arrow'>>></span></li>
<li class='li-lev-1'>Sri Lanka</li>
<li class='li-lev-1' data-attr='oo2'>USA<span class='arrow'>>></span></li>
<li class='li-lev-1'>Australia</li>
</ul>

<ul  data-attr='oo1' class='ul-lev-2 ul'>
<li class='li-lev-2'>Goa</li>
<li class='li-lev-2' data-attr='oo1-1'>Delhi<span class='arrow'>>></span></li>
<li class='li-lev-2'>J & K</li>
<li class='li-lev-2' data-attr='oo1-2'>UP<span class='arrow'>>></span></li>
</ul>

  <ul  data-attr='oo2' class='ul-lev-2 ul'>
<li class='li-lev-2' data-attr='oo2-1'>California<span class='arrow'>>></span></li>
<li class='li-lev-2'>Florida</li>
<li class='li-lev-2' data-attr='oo2-2'>Hawaii<span class='arrow'>>></span></li>
<li class='li-lev-2' data-attr='oo2-3'>Texas<span class='arrow'>>></span></li>
</ul>

<ul  data-attr='oo1-1' class='ul-lev-3 ul'>
<li class='li-lev-3'>VIvek VIhar</li>
<li class='li-lev-3'>VAsant Kunj</li>
<li class='li-lev-3'>Dwarka</li>
<li class='li-lev-3'>Janakpuri</li>
</ul>

<ul  data-attr='oo1-2' class='ul-lev-3 ul'>
<li class='li-lev-3'>Ghaziabad</li>
<li class='li-lev-3'>Kausahambi</li>
<li class='li-lev-3'>Meerut</li>
<li class='li-lev-3'>Kanpur</li>
</ul>

<ul  data-attr='oo2-1' class='ul-lev-3 ul'>
<li class='li-lev-3'>Los Angeles</li>
<li class='li-lev-3'>San Diego</li>
<li class='li-lev-3'>San Jose</li>
<li class='li-lev-3'>Anaheim</li>
</ul>

<ul  data-attr='oo2-2' class='ul-lev-3 ul'>
<li class='li-lev-3'>Oahu</li>
<li class='li-lev-3'>Honolulu</li>
<li class='li-lev-3'>Hilo</li>
<li class='li-lev-3'>Maui</li>
</ul>

<ul  data-attr='oo2-3' class='ul-lev-3 ul'>
<li class='li-lev-3'>Houston</li>
<li class='li-lev-3'>Dallas</li>
<li class='li-lev-3'>El Paso</li>
<li class='li-lev-3'>Waco</li>
</ul>
</div>

.custom{width:200px;
padding:5px;
height:20px;
border:1px solid #ccc;}
ul{list-style: none; padding:0; display:none;}
ul li{padding:5px;}
.ul-lev-1, .ul-lev-2, .ul-lev-3{position:absolute}
.ul {
  border: 1px solid #ccc;
  width:200px;
  background: #fff;
}
.ul li {
  border-bottom:1px solid #ccc;
}
.ul li:hover{
  background:#ccc;
}
.ul li:last-child{border-bottom: none;}
.arrow {
     height: 5px;
    width: 5px;
    display: inline-block;
    float: right;
  margin-right:15px
}

$(".custom").click(function(){
  $('.ul-lev-1').show();
});
/*positioning the element start*/
 var offse = $('.custom').offset()
 $('.ul-lev-1').css({top:  offse.top+$('.custom').height(), left: offse.left}) 
/*positioning the element end*/
$('.ul li').hover(function(){
  if($(this).attr('data-attr')){    
    var dis = $(this);
    var disTop = dis.offset().top-15;
    var disLeft = dis.offset().left + dis.width()+10;

    var attr1 = $('.drop').find('.ul-lev-2');
    var attr2 = $('.drop').find('.ul-lev-3');

    if($(this).hasClass('li-lev-1')){
        attr1.each(function(){
      if($(this).hasClass("ul-lev-2") && dis.attr('data-attr') == $(this).attr('data-attr')){
         var offe2 = $(this).offset();
           $(this).show();
        $(this).css({
          top:disTop, 
          left:disLeft
        })     
      }
    })
    }
    if($(this).hasClass('li-lev-2')){
        attr2.each(function(){
      if($(this).hasClass("ul-lev-3") && dis.attr('data-attr') == $(this).attr('data-attr')){
         var offe3 = $(this).offset();
           $(this).show();
        $(this).css({
          top:disTop, 
          left:disLeft
        })     
      }
    })
    }  
  }
});

$('.ul li').mouseleave(function() { debugger;
        if($('body:hover').length){
  //  $('.ul-lev-3, .ul-lev-2').hide();
    }
    if ($(this).attr('data-attr')) {
        if ($(this).hasClass("li-lev-1")) {
            if (!$('.ul-lev-2:hover').length) {
                $('.ul-lev-2').hide();
            }
        }
        if ($(this).hasClass("li-lev-2")) {
            if (!$('.ul-lev-3:hover').length) {
                $('.ul-lev-3').hide();
            }             
        }         
    }
    else{
    if ($(this).hasClass("li-lev-3")) {debugger;
            if ($('.ul-lev-3:hover').length ) {
             //   $('.ul-lev-3').hide();
                console.log('hidden');
            }
            else
            if( $('body:hover').length){
             $('.ul-lev-3').hide();
             $('.ul-lev-2').hide();
            }
        }
         if ($(this).hasClass("li-lev-2")) {
            if (!$('.ul-lev-2:hover').length) {
                $('.ul-lev-2').hide();
              //  console.log('hidden');
            }             
        }}
})

Answer 1

直接回答你的问题会有不同的方法，但问题实际上出在其他地方，所以我会详细说明一下。假设我们想重新发明轮子作为测试用例。这里的代码不是您问题的完美解决方案，因为它可以改进(出于以下某些原因)，但它说明了我想告诉的内容。

• 并不是因为 jQuery 选择器易于使用，它们才是动态获取有关 DOM 信息的好方法。如果在一个函数中两次使用相同的 id 选择器，DOM 将被解析两次。必须考虑代码以尽可能少地直接从选择器访问元素，而是将结果存储在变量中以便重复使用。

=> 对于这一点，fiddle 可以改进为一个函数，它从表示菜单的数组构造，并根据它们的级别存储 jQuery 菜单元素，以便能够轻松地在它们上添加和删除类。

• 处理对象时至少有两种方法:可以有一个控制一切的通用处理程序，也可以有处理对象本身的处理程序。我认为当这些系统中的一个试图做另一个应该做的事情时，存在设计问题(在你的代码中，你在每个元素上放置一个处理程序，每个元素都试图解析整个菜单以获取它们的状态，就好像是一般处理程序)。如果要将控件放在元素级别，元素应该只关心他可以访问的内容，或者最终将元素控件触发到他的父级或子级。

=> 对于这一点，例如可以通过在 html 代码中嵌套列表来改进代码，以匹配子菜单的层次结构。 html 元素将包含它们自己并且可以通过层次结构找到。不需要存储 id 或类来找到子菜单来显示它，而是查看子列表。因此，具有处理程序的元素可以直接作用于可访问对象，而不必解析 DOM 来找到它们。

代码示例:就像我说的，这不是一个完美的答案，它只是表明您想要实现的目标可以重新考虑到另一个更简单的问题:例如，如果一个列表元素隐藏所有显示子菜单之前的更深层次的子元素，实际上不需要检查菜单的所有悬停状态，只是确定要隐藏哪些菜单。

我只简化了菜单的一部分，没有使用 CSS

https://jsfiddle.net/2a2142s6/3/