Question

我有一张桌子，我在列表中使用fadeToggle来隐藏和显示数据，但我想创建一个＆＃34; Back to All＆＃34;功能。也就是说，当我点击＆＃34;回到全部＆＃34;它会还原所有切换的元素（我点击的元素），但我不确定这样做。

HTML

 <div class="main">
            <ul class="top_menu" >
                <li class="orderList" id="starter_li">Starter</li>
                <li class="orderList" id="soup_li"> Soup</li>
                <li class="orderList" id="seafood_li">Seafood</li>
                <li class="orderList" id="return_li">Return All</li>
            </ul>
            <div id="middleBox">
                <table class="food_table" id="starters" style="width:100%">
                    <tr></tr>
                    <tr>
                        <td>S1</td> 
                        <td>Starter1<br>
                        <td>10</td>
                    </tr>
            <table class="food_table" id="soups" style="width:100%">
                    <tr>
                        <td>1</td>
                        <td>Soup1</td>
                        <td>4</td>
                    </tr>   
                </table>
             <table class="food_table" id="seafood" style="width:100%">
                    <tr>
                        <td>2</td>
                        <td>seafood1</td>
                        <td>7</td>
                    </tr>   
                </table>

的jQuery

        $(document).ready(function(){
        $("#starter_li").click(function(){
        $("#starters").fadeToggle(500);
    });
        $("#soup_li").click(function(){
        $("#soups").fadeToggle(500);
    });
        $("#seafood_li").click(function(){
        $("#seafoods").fadeToggle(500);
      });
        $("#return_li").click(function(){
                $(".food_table").fadeToggle(500);
        });

}）;

Answer 1

您可以使用.food_table类作为公共选择器，然后使用jQuery函数来显示它们（例如fadeIn（）或show（））

示例：

$('#backToAll').click(function () {
  $('.food_table').fadeIn();
});

jQuery fadeToggle回到默认值

1 个答案: