Jquery 将鼠标悬停更改为下拉菜单的Onclick切换

我正在为我的教会创建一个网站，我刚刚完成了主页。但是，在转到其他页面之前，我需要完成菜单栏。当前，该菜单设置为当鼠标悬停在上方时显示水平下拉菜单。我真的很想把这个悬停改成一个单击函数，我知道这个函数可以通过Javascript和/或JQuery来解决。我浏览了好几个网站，找不到适合我需要的东西，特别是因为我想保留我目前的CSS编码。我希望能够点击菜单并显示子菜单，如果用户再次点击相同的主菜单项或点击屏幕上的其他地方，我希望子菜单消失

这是我的HTML：

<!--Start Nav Menu-->
<nav>
<ul id="bar1">

    <!--Begin About Us-->
    <li><a href="#">ABOUT US</a>
        <!--Begin drop down menu items-->
        <ul>
            <li>
                <a href="#"><font color="#2b77a0">•</font> New to Nederland First AG</a>          
                <a href="#"><span style="margin-left:10px;"><font color="#2b77a0">•</font> Our History</span></a>
                <a href="#"><span style="margin-left:10px;"><font color="#2b77a0">•</font> Our Beliefs</span></a>
            </li>

        </ul>
        <!--End drop down menu items-->
    </li>
    <!--End About Us-->

            <!--Begin Ministries-->
    <li><a href="#">MINISTRIES</a>
        <!--Begin drop down menu items-->
        <ul>
            <li>
                <a href="#"><font color="#2b77a0">•</font> Kids</a>          
                <a href="#"><span style="margin-left:10px;"><font color="#2b77a0">•</font> Youth</span></a>
                <a href="#"><span style="margin-left:10px;"><font color="#2b77a0">•</font> Women</span></a>
                <a href="#"><span style="margin-left:10px;"><font color="#2b77a0">•</font> Men</span></a>
            </li>

        </ul>
        <!--End drop down menu items-->
    </li>
    <!--End Ministries-->

                    <!--Begin Events-->
    <li><a href="#">EVENTS</a>
        <!--Begin drop down menu items-->
        <ul>
            <li>
                <a href="#"><font color="#2b77a0">•</font> Latest News</a>          
                <a href="#"><span style="margin-left:10px;"><font color="#2b77a0">•</font> Monthly Calendar</span></a>
            </li>

        </ul>
        <!--End drop down menu items-->
    </li>
    <!--End Events-->

                        <!--Begin Listen Online-->
    <li><a href="#">LISTEN ONLINE</a>
        <!--Begin drop down menu items-->
        <ul>
            <li>
                <a href="#"><font color="#2b77a0">•</font> Sermons</a>          
                <a href="#"><span style="margin-left:10px;"><font color="#2b77a0">•</font> Teachings</span></a>
                <a href="#"><span style="margin-left:10px;"><font color="#2b77a0">•</font> Archive</span></a>
            </li>

        </ul>
        <!--End drop down menu items-->
    </li>
    <!--End Listen Online-->
    <li><a href="pages/contact.html">CONTACT US</a></li>
    <li class="filler"></li>
</ul>

简而言之，我只是想通过JS或JQuery将鼠标悬停替换为单击函数。谢谢你的帮助和建议

---

这是我的小提琴：

您可以使用以下jQuery代码：

$("#bar1").on("click","li", function(){
    event.stopPropagation();
    $("#bar1 > li").each(function(){//close all opened sub-menu
        $(this).find("ul li").css("display", "none");
        $(this).find("ul li").css("text-decoration","none");
    });
    $(this).find("ul li").css("display", "block");
    $(this).find("ul li").css("background-color","transparent");
});
$('html').click(function() {
    $("#bar1 > li").each(function(){//close all opened sub-menu
        $(this).find("ul li").css("display", "none");
        $(this).find("ul li").css("text-decoration","none");
    });
});

我使用

event.stopPropagation

是因为

如果单击事件传播到元素，则隐藏菜单。如果 click事件起源于#bar内部，请停止该事件以便 不会到达元素，因此只能在#条外单击 将隐藏菜单

---

看看这个..

谢谢你的回复，我真的很感激。我看了看你的小提琴，试着在我自己的代码中实现。然而，我尝试的Fiddle和实现都没有起到任何作用。我看到的唯一一件事是它取消了悬停，但当我尝试单击主菜单项时，子菜单没有出现。在我的编码中是否还有其他需要更改的内容才能使代码正常工作？我已经将JQuery用于一些动画目的，因此我已经从Googleapis获得了到JQuery 2.11.1的链接，并且我还有一个链接到JQuery 1.11.0的外部文件。也许其中一个相互冲突？我不确定，但我还是会检查的，因为你的代码目前还不适用于我。也许。。我想你只需要其中的一个，我只是继续使用最新的版本。遗憾的是，我仍然有它不能工作的问题。我尝试删除JQuery 1.11.0，保留2.1.1，但我的动画停止工作。即使离开1.11.0并再次输入代码，我仍然没有看到任何事情发生。我真的很感谢你的帮助，但似乎出于某种原因，这是行不通的。嗯，这很奇怪。。因为你在我的小提琴上看到它很好。。希望你能找到问题所在。。

$("#bar1").on("click","li", function(){
    event.stopPropagation();
    $("#bar1 > li").each(function(){//close all opened sub-menu
        $(this).find("ul li").css("display", "none");
        $(this).find("ul li").css("text-decoration","none");
    });
    $(this).find("ul li").css("display", "block");
    $(this).find("ul li").css("background-color","transparent");
});
$('html').click(function() {
    $("#bar1 > li").each(function(){//close all opened sub-menu
        $(this).find("ul li").css("display", "none");
        $(this).find("ul li").css("text-decoration","none");
    });
});