带有自己的div的Jquery下拉列表

Question

我怎么才能做这样的事情：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);
  });

我的主要问题是当我离开#oil-dd区域时，我的带有ul的div (".oil-dd")消失了……但是该怎么做呢，即使我用完了# when dd(它必须显示我是在.olee-dd还是#oil dd上)，.olee-dd仍然在页面上，但是当我用完了.olee-dd和#oil-dd时，.olet-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>

Answer 1

你可以试试这样的东西

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

});

。