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を使用していない場合は.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 に答える