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”）会消失，但是怎么做，那个.oil- dd仍然在页面上，即使我没有＃oil-dd（它必须显示我是否在.oil-dd或＃oil-dd），但是.oil-dd隐藏了当我离开.oil- dd和＃oil-dd？

必须与链接页面（Автозапчасти附近）

相同

in 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);
    });

});

An Example

带有自己div的Jquery下拉列表

1 个答案: