基于移动设备上不起作用的条件语句的背景不透明度变化

Question

我在做一个卡路里计算器。它里面有一个饮食过滤器。如果选择了饮食，则不适合该饮食的项目将变为灰色且无法单击。这在桌面上有效，但是在移动设备上却没有达到预期的效果。会出什么问题呢？

这是实况转播：

http://www.padthai.decorolux.com/Calorie/

这里还有一支钢笔：

https://codepen.io/Pbalazs89/full/GxYdOY

    //  Filters + Description text setup

$(document).on('click', '.diet-filter-button', function () {
     var map = {
        vegan: {
            attr: 'vegan',
            desc: 'veganDescription'
        },
        vegeterian: {
            attr: 'vegetarian',
            desc: 'vegetarianDescription'
        },
        gluten: {
            attr: 'glutenfree',
            desc: 'glutenFreeDescription'
        },
        lactose: {
            attr: 'lactoseFree',
            desc: 'lactoseFreeDescription'
        },
        addedSugar: {
            attr: 'noAddedSugar',
            desc: 'noAddedSugarDescription'
        }
    },
    diet = $(this).data('diet'),
    filtered = $(this).hasClass("filtered");

    if (filtered) {
        $(this).removeClass("filtered");
        $(".ingredient:not([" + map[diet]['attr'] + "])").fadeTo(1000, 1).css("pointer-events", "auto");
        $("#" + map[diet]['desc']).css("opacity", "0");
    } else {
        $(this).addClass("filtered");
        $(".ingredient:not([" + map[diet]['attr'] + "]").fadeTo(1000, 0.5).css("pointer-events", "none");
        $("#" + map[diet]['desc']).css("opacity", "1");
    }
});

HTML

<div id="contenttable">
          <div class="dropdown">
                  <div class="dropdownmenu">
                    <button class="dropbtn main">Diet or Allergen Filter <i class="fa fa-sort-up" style="line-height:0px; margin-left: 5px;"></i></button></div>

                   <div id="myDropdown" class="dropdown-content">
    <a id="veganDiet" class="dropbtn2 diet-filter-button" data-diet="vegan"> Vegan</a>
    <a id="vegetarianDietButton" class="dropbtn2 diet-filter-button" data-diet="vegeterian"> Vegetarian</a>
    <a id="noGlutenButton" class="dropbtn2 diet-filter-button" data-diet="gluten"> Gluten-Free</a>
    <a id="noLactoseButton" class="dropbtn2 diet-filter-button" data-diet="lactose"> Lactose-Free</a>
    <a id="noAddedSugarButton" class="dropbtn2 diet-filter-button" data-diet="addedSugar"> No Added Sugar</a>
</div>
              </div> 

            <div class="maindish">




<div id="VeganNoBaseSauce"></div>


                <!-- BASES -->
                <div><img class="headingimage" src="http://www.padthai.decorolux.com/wp-content/uploads/2018/03/ikonok-06.png"></div>
                <table>
                    <tr>
                        <th width="15%">Bases</th>
                        <th width="20%"></th>
                        <th width="15%" style="font-weight:normal">Calories</th>
                        <th width="15%" style="font-weight:normal">Carbs</th>
                        <th width="15%" style="font-weight:normal">Fat</th>
                        <th width="15%" style="font-weight:normal">Protein</th>
                        <th width="5%" style="font-weight:normal">Add</th>
                    </tr>
                    <tr vegetarian vegan lactosefree glutenfree soyfree sugarfree noaddedsugar>
                        <td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra.png'></td>
                        <td>Rice Noodle</td>
                        <td>517.2</td>
                        <td>76.1</td>
                        <td>14.4</td>
                        <td>20.8</td>
                        <td class="ingredients" data-calories="517.2" data-carbs="76.1" data-fat="14.4" data-proteins="20.8"><i class="fa fa-plus" style="font-size:20px;"></i></td>
                    </tr>
                    <tr class="ingredient" vegetarian lactosefree soyfree sugarfree noaddedsugar>
                        <td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra2.png'></td>
                        <td>Egg Noodle</td>
                        <td>510.5</td>
                        <td>66.1</td>
                        <td>14.1</td>
                        <td>29.8</td>
                        <td class="ingredients" data-calories="510.5" data-carbs="66.1" data-fat="14.1" data-proteins="29.8"><i class="fa fa-plus" style="font-size:20px;"></i></td>
                    </tr>
                    <tr class="ingredient" vegetarian vegan lactosefree glutenfree soyfree sugarfree noaddedsugar>
                        <td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra3.png'></td>
                        <td>Vermicelli</td>
                        <td>506.9</td>
                        <td>76.9</td>
                        <td>14.1</td>
                        <td>18.1</td>
                        <td class="ingredients" data-calories="506.9" data-carbs="76.9" data-fat="14.1" data-proteins="18.1" ><i class="fa fa-plus" style="font-size:20px;"></i></td>
                    </tr>
                    <tr class="ingredient" vegetarian vegan lactosefree soyfree sugarfree noaddedsugar>
                        <td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra4.png'></td>
                        <td>Whole Grain Noodle</td>
                        <td>476.6</td>
                        <td>53.8</td>
                        <td>16.6</td>
                        <td>28.0</td>
                        <td class="ingredients" data-calories="476.6" data-carbs="53.8" data-fat="16.6" data-proteins="28" ><i class="fa fa-plus" style="font-size:20px;"></i></td>
                    </tr>
                    <tr class="ingredient" vegetarian vegan  glutenfree soyfree sugarfree noaddedsugar>
                        <td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra5.png'></td>
                        <td>White Rice</td>
                        <td>514.8</td>
                        <td>72.4</td>
                        <td>14.8</td>
                        <td>23.0</td>
                        <td class="ingredients" data-calories="514.8" data-carbs="72.4" data-fat="14.8" data-proteins="23" ><i class="fa fa-plus" style="font-size:20px;"></i></td>
                    </tr>
                    <tr class="ingredient" vegetarian vegan lactosefree glutenfree soyfree sugarfree noaddedsugar>
                        <td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra6.png'></td>
                        <td>Brown Rice</td>
                        <td>516.0</td>
                        <td>70.1</td>
                        <td>16.0</td>
                        <td>22.9</td>
                        <td class="ingredients" data-calories="516" data-carbs="70.1" data-fat="16" data-proteins="22.9" ><i class="fa fa-plus" style="font-size:20px;"></i></td>
                    </tr>
                    <tr class="ingredient" vegetarian vegan lactosefree glutenfree soyfree sugarfree noaddedsugar>
                        <td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra7.png'></td>
                        <td>Vegetable Base</td>
                        <td>106.6</td>
                        <td>14.2</td>
                        <td>1.8</td>
                        <td>8.4</td>
                        <td class="ingredients" data-calories="106.6" data-carbs="14.2" data-fat="1.8" data-proteins="8.4" ><i class="fa fa-plus" style="font-size:20px;"></i></td>
                    </tr>



                </table>

*奖金问题：

当从iPhone6+ (425px宽度)观看时，“饮食或过敏原过滤器”按钮看起来太大了。我尝试设置一个@media max-width 440px来配置它，但似乎没有效果。如果我在我的桌面上从Chrome浏览器上查看，@media查询可以正常工作，但在移动设备上不行。感谢所有的帮助！

Answer 1

您的问题只存在于CSS中，并且您在某些属性中给出了"!important“。而且每次检查设计都会删除浏览器和手机中的所有历史记录，或者使用私人浏览器。