0

答えは簡単だと思いますが; Web サイトのレストラン メニュー システム用の簡単な Jquery を作成しようとしています。menu_list アイテムを、選択した 1 つの slidesDown の前に slideUp に表示する必要があります。これは、slideDown を遅らせることで機能させることができます。延期しようとしましたが、何らかの理由で、現在のメニューリストが最初にスライドするのではなく、現在のメニューリストの下に表示されます。if else を試しましたが、それもうまくいきません。誰かが私が間違っていることを見ることができますか?

このコードは機能しますが、遅れています (明らかな理由により)

$('.s_menu, .m_menu').click(function(){
var menuid = event.target.id;
var mlist = ('#') + (menuid) + ('_list');
var last = $('.menu_list').not(mlist);

    $(last).slideUp(400);
    $(mlist).delay(600).slideDown(400);

    return(false);
  });
});

このコードでは、前のスライドアップなしで div が互いの下に表示されます。

function first(){$(last).slideUp(400);}
function next(){$(mlist).slideDown(400);}

$.when(first).then(next);
    return(false);
  });
});

これもそうです

  if ($(last).is(':hidden')) {
    $(mlist).slideDown(400);
  } else {      
    $(last).slideUp(400);
    $(mlist).delay(600).slideDown(400);
  }
    return(false);
   });
});

HTML は次のとおりです。

<div id="menu_nav">

                <ul class="menu_top">
                    <li id="menu_starters" class="menu">STARTERS</li>
                    <li id="menu_mains" class="menu" >MAINS</li>
                    <li id="menu_noodles" class="menu">NOODLES &amp RICE</li>
                </ul>   

                <ul id="start_nav" class="menu_sub">
                    <li id="st_meat" class="s_menu">MEAT &amp FISH</li>
                    <li id="st_veg" class="s_menu">VEGETARIAN</li>
                    <li id="st_soups" class="s_menu">SOUPS</li>
                    <li id="st_salads" class="s_menu">SALADS</li>
                </ul>
                <ul id="mains_nav" class="menu_sub">
                    <li id="ma_curries" class="m_menu">CURRIES</li>
                    <li id="ma_meat" class="m_menu">MEAT</li>
                    <li id="ma_seafood" class="m_menu">SEAFOOD</li>
                    <li id="ma_veg" class="m_menu">VEGETARIAN</li>
                </ul>
            </div>
<article id="st_meat_list" class="st menu_list">
<ul>
<!--series of list items here-->
</ul>
 <article id="st_veg_list" class="st menu_list">
<ul>
<!--series of list items here-->
</ul>
 <article id="st_soups_list" class="st menu_list">
<ul>
<!--series of list items here-->
</ul>

など、各リストを含む記事で

ここでフィドル

4

1 に答える 1

0

常に下にスライドするサブメニューは 1 つだけなので、対象のメニューを下にスライドする前にすべてのサブメニューを hide() して、対象のメニューを下にスライドするために hide() のコールバックを使用します。次のようなものかもしれません：

$('.s_menu, .m_menu').click(function(){
  var correspnding_list = $(selector_to_mlist);
  var list = $('.common_class_of_lists');
   list.slideUp({
     complete: function (){
       corresponding_list.slideDown();
     }
   })
});

更新: slideDown() の代わりに slideToggle() を使用してください

http://jsfiddle.net/XK6JX/

于 2013-05-23T16:58:24.873 に答える