如何在第一次单击时运行 jquery 函数，在第二次单击时运行另一个函数答案

【问题标题】：How to run a jquery function in first click and another function in second click如何在第一次单击时运行 jquery 函数，在第二次单击时运行另一个函数
【发布时间】：2014-07-14 06:31:21
【问题描述】：

我有一个与 jquery 函数一起使用的 html 菜单。当有人单击父菜单项时，它显示子项，如果还有另一个子项（子项），则显示用户是否单击第一个子项以及当他将鼠标移出父项时，每个子项和子项没有显示，因为这对用户来说有点混乱我试图将鼠标离开事件更改为单击事件。

<div style="margin-top: 200px; width: 140px; text-align: left;">
                    <div>
                        <a href="#Home" onclick="close_this()" class="lmenu">Home</a>
                    </div>
                    <div>
                        <a href="#AboutUs" onclick="load_contents('aboutus.php', 400, '')" class="lmenu">About Us</a>
                    </div>
                    <div class="lmenu parent">
                        <div>
                            <a href="#" class="lmenu">Our Services</a>
                        </div>
                        <div class="subperent">
                            <a href="#">
                                Event Management
                            </a>
                            <div class="chilld" onclick="load_contents('eventmngmnt.php', 400, 'categories.php')">
                                <a class="lmenu" href="#">
                                    Categories
                                </a>
                            </div>
                            <div class="chilld" onclick="load_contents('providingfac.php', 800, '')">
                                <a class="lmenu" href="#">
                                    Providing Facilities
                                </a>
                            </div>
                        </div>
                        <div class="subperent">
                            <a href="#">
                                Rental
                            </a>
                            <div class="chilld">
                                <a class="lmenu" href="#" onclick="load_contents('avequipments.php', 850, '')">
                                    AVEquipments
                                </a>
                            </div>
                            <div class="chilld">
                                <a class="lmenu" href="#" onclick="load_contents('otherservices.php', 850, '')">
                                    Other Services
                                </a>
                            </div>
                        </div>
                        <div class="subperent">
                            <a href="#">
                                Exhibition Stalls 
                            </a>
                            <div class="chilld">
                                <a class="lmenu" href="#standard_stall" onclick="load_contents('standardstalls.php', 600, '')">
                                    Standard Stall
                                </a>
                            </div>
                            <div class="chilld">
                                <a class="lmenu" href="#designed_stall" onclick="load_contents('designedstalls.php', 600, '')">
                                    Designed Stalls
                                </a>
                            </div>
                        </div>

                        <div style="clear: both"></div>
                    </div>
                    <div class="lmenu parent">
                        <div>
                            <a href="#" class="lmenu">Gallery</a>
                        </div>
                        <div class="subperent">
                            <a class="lmenu" onclick="load_contents('gallery.php', 600, '')" href="#">
                                Events & Confferance
                            </a>
                        </div>
                        <div class="subperent">
                            <a class="lmenu" onclick="load_contents('gallery_stalls.php', 600, '')" href="#">
                                Stalls
                            </a>
                        </div>
                    </div>
                </div>

然后我使用这个 jquery 脚本来查看和隐藏菜单的子项和子项。

var $sub_itmes;
$(".parent").on({
    click: function() {
        $sub_itmes = $('.subperent', this);
        $sub_itmes.css({
            "display": "block",
        });
        $sub_itmes.animate({
            "opacity": 1
        });
    },
    mouseleave: function() {
        $sub_itmes = $('.subperent', this);
        $sub_itmes.css({
            "display": "none",
        });
        $sub_itmes.animate({
            "opacity": 0
        });
    }
});

$(".subperent").on({
    click: function() {
        $sub_itmes = $('.chilld', this);
        $sub_itmes.css({
            "display": "block",
        });
        $sub_itmes.animate({
            "opacity": 1
        });
    },
    mouseleave: function() {
        $sub_itmes = $('.chilld', this);
        $sub_itmes.css({
            "display": "none",
        });
        $sub_itmes.animate({
            "opacity": 0
        });
    }
});

此代码运行良好，但在第一次单击后，我使用“mouseleave”事件隐藏子项目，但我需要将“mouseleave”事件转换为第二次单击。有人可以给我一个指导吗？

【问题讨论】：

点击时，检查变量。如果不正确，请将其设置为 true。下一次点击就成真了，接下来就可以为所欲为。
... 或者在其处理程序末尾删除第一个事件侦听器，并附加另一个。
或者你可以用谷歌搜索“切换事件替换”。您应该找到 event 一个实现旧切换事件的简单插件。

标签： javascript jquery html css

【解决方案1】：

现在我正在使用这个 jquery 代码，但仍然有一点问题，即当我单击父项时，它会显示子项，如果我单击子项，则会显示子项。但是，如果我再次单击子项，它会隐藏这些子项，但问题是当我第二次单击子项时，我无法隐藏子项。

这不是一个大问题，所以我认为这很好，所以我将其作为我的答案，但如果有人能想办法隐藏子项目，那对我也有好处。

var $showing_sub = 0; var $showing_child = 0;

$(function() {
    $('.parent').click(function() {
        if ($showing_sub == 0) {
            $sub_itmes = $('.subperent', this);
            $sub_itmes.css({
                "display": "block",
            });
            $sub_itmes.animate({
                "opacity": 1
            });
        }
        else
        {
            $sub_itmes = $('.subperent', this);
            $sub_itmes.css({
                "display": "none",
            });
            $sub_itmes.animate({
                "opacity": 0
            });
            $showing_sub = 0;
        }
    });
});

$(function() {
    $('.subperent').click(function() {
        if ($showing_child == 0) {
            $sub_itmes = $('.chilld', this);
            $sub_itmes.css({
                "display": "block",
            });
            $sub_itmes.animate({
                "opacity": 1
            });

            $showing_child = 1;
            //$showing_sub = 1;
        }
        else
        {
            $sub_itmes = $('.chilld', this);
            $sub_itmes.css({
                "display": "none",
            });
            $sub_itmes.animate({
                "opacity": 0
            });
            $showing_child = 0;

        }
    });
});

【讨论】：