javascript - 在移动设备上单击两次后，toggleClass 条件不起作用/图标消失

Question

我正在尝试使用 jquery 为按钮制作动画。在桌面上它们很好，但在移动设备上，单击两次后按钮就会消失。

我不知道如何告诉它，如果类只有“fa”，则自动将“fa-plus”添加到类中。有人能指出我正确的方向吗？

Js:

    // plus button hover effect

$("td i").hover(
    function() {
        $(this).removeClass('fa-plus');
        $(this).addClass('fa-plus-circle');
    },

    function() {
        $(this).removeClass('fa-plus-circle');
        $(this).addClass('fa-plus');

        if ($(this).hasClass("fa-times-circle")) {
            $(this).removeClass('fa-plus');
        }

       if ($(window).height() <= 1024) return;

    });

// plus button click effect

$("td i").click(function() {
    $(this).removeClass('fa-plus');
    $(this).removeClass('fa-plus-circle');
    $(this).toggleClass("fa-times-circle fa-plus");



});

HTML 示例

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

这是笔:

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

Answer 1

问题是您可以悬停并单击，在移动设备上，当您单击某个元素时，也会应用悬停。

单击 x 后，按钮似乎消失了，但如果您点击其他地方以使焦点不再在按钮上，您会看到按钮又回来了。

这是因为悬停效果。在我看来，你可以在 css 中编写悬停代码，我不明白为什么你需要在 js 中执行此操作。

如果您有代码来检测用户正在使用哪个设备，那么您只能在桌面上执行悬停代码。

看起来悬停正在反转背景和文本颜色，因此将此代码移动到 css 应该不是问题。如果您的页面是响应式的，您可以将悬停代码放在媒体查询范围中，以定位宽度 > 768px，这样在移动设备上悬停就不会出现在此处。由于点击，您无法真正将鼠标悬停在移动设备上