如何在第一次單擊中運行jquery函數，然后在第二次單擊中運行另一個函數

Question

我有一個與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”事件轉換為第二次單擊。 有人可以給我指導嗎？

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

        }
    });
});