1

我怎么能做这样的事情：链接

现在我这样做了（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会隐藏？

它必须与链接页面上的一样（近Автозапчасти）

在 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>
4

1 回答 1

0

你可以试试这样的

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

});

一个例子。

于 2012-11-12T21:47:56.057 回答