我如何在这里做这样的事情:link
现在我这样做了(Rails haml):
= link_to "Масла/автохимия", :oil_mp, :id => "oil-dd"
.oil-dd
%ul
%li
= link_to "Масла моторные для легковых автомобилей", oils_path(:product_type_id => 13)
%li
= link_to "Масла трансмисионные", oils_path(:product_type_id => 15)
%li
= link_to "Антифризы", oils_path(:product_type_id => 3)
%li
= link_to "Вода дисцилированная", oils_path(:product_type_id => 6)
和我的jQuery代码外观:
$("#oil-dd").mouseover(function() {
$(".oil-dd").show();
});
$("#oil-dd").mouseout(function() {
$(".oil-dd").fadeOut(2000);
});
我的主要麻烦是我对UL的div,当我离开#油-DD区域时,出现(" .oil-dd
")会消失...但是该怎么做,那是。页面,即使我不在#oil-dd(它必须显示我在.oil-dd或#oil-dd上),但是当我不在.oil-dd和#oil时,.iol-dd隐藏-dd?
它必须如链接页面上(靠近Автозапчасти
)
在html
中<a href="/catalogs/oil_mp" id="oil-dd">Масла/автохимия</a>
<div class="oil-dd" style="display: block;">
<ul>
<li>
<a href="/catalogs/oils?product_type_id=13">Масла моторные для легковых автомобилей</a>
</li>
<li>
<a href="/catalogs/oils?product_type_id=15">Масла трансмисионные</a>
</li>
<li>
<a href="/catalogs/oils?product_type_id=3">Антифризы</a>
</li>
<li>
<a href="/catalogs/oils?product_type_id=6">Вода дисцилированная</a>
</li>
<li>
<a href="/catalogs/oils?product_type_id=5">Моющие жидкости</a>
</li>
<li>
<a href="/catalogs/oils?product_type_id=8">Жидкости тормозные</a>
</li>
<li>
<a href="/catalogs/oils?product_type_id=18">Автокосметика/автохимия</a>
</li>
<li>
<a href="/catalogs/oils?product_type_id=7">Жидкости гидравлические</a>
</li>
<li>
<a href="/catalogs/oils?product_type_id=11">Масла прочие</a>
</li>
<li>
<a href="/catalogs/oils?product_type_id=10">Масла индустриальные</a>
</li>
<li>
<a href="/catalogs/oils?product_type_id=12">Масла для грузовых автомобилей</a>
</li>
<li>
<a href="/catalogs/oils?product_type_id=16">Смазки</a>
</li>
<li>
<a href="/catalogs/oils?product_type_id=17">Тех.жидкости</a>
</li>
</ul>
</div>
您可以尝试类似的东西
$(document).ready(function(){
var timeOut=0;
$("#oil-dd").mouseenter(function(){
clearTimeout(timeOut);
$(".oil-dd").stop(1,1).show();
}).mouseleave(function() {
timeOut=setTimeout(function(){
$(".oil-dd").fadeOut(1000);
}, 1000);
});
$(".oil-dd").mouseenter(function(){
clearTimeout(timeOut);
}).mouseleave(function(){
timeOut=setTimeout(function(){
$(".oil-dd").fadeOut(1000);
}, 1000);
});
});
示例。