0
Я работаю над выпадающим каскадом выбора, который является альтернативой стандартным каскадным выпадающим спискам, используемым в ASP.net. Дело в том, что я реализовал половину из них, но не смог сделать это правильно.Одиночный каскадный выпадающий список (в отличие от того, что используется в ASP.net)
Единственное, что мне нужно - это скрыть вторичное меню, когда мышь выйдет из него. Я использовал ("classname:hover").length, но это не работает все время.
См изображение:
Пожалуйста, найти плагин в указанный URL 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');
}
}}
})
Не ясно, какие конкретные проблемы. Объяснить поведение, ожидаемое и как оно отличается от того, что делает текущий код – charlietfl
Я предлагаю вам попробовать 'if ($ (selection) .is (': hover')) {' синтаксис, но, возможно, вам стоит взглянуть на jQuery 'hover 'функция, это может быть более простой способ для обработки событий мыши. – Kaddath
@charlietfl: Я загрузил pic, надеюсь, что это прояснит. Пожалуйста, проверь это. –