Question

我为教会创建了一个网站，我刚刚完成了主页。但是，在转到其他页面之前，我需要完成菜单栏。目前，菜单设置为在悬停时显示水平下拉。我真的希望将这个悬停变为点击功能，我知道可以通过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>

这是我的CSS：

nav {
position: relative;
width:960px;
z-index:9999;
margin-left:auto;
margin-right:auto;
padding:0;
background-color:transparent;
text-align:justify;
margin-top:-10px;
font-size:0.1px;
}


#bar1 {


background-color:transparent;
padding:0;
text-align: justify;
overflow: hidden;
height:39px;
border-top: 1px solid #222222; border-bottom: 1px solid #90908e;
font-size:0.1px;
}


#bar1>li {
display:inline-block;
margin-top:8px;
height:100%;
}


#bar1>li>a {
font-family:'Oswald',Verdana, Geneva, sans-serif;
font-size:15px;
color:#464748;
text-decoration:none;

}
#bar1>li>a:hover,#bar1>li>a:active,#bar1>li:hover>a {
font-family:'Oswald',Verdana, Geneva, sans-serif;
font-size:15px;
color:#2b77a0;
text-decoration:none;

}

#bar1>li>ul>li {
border-top: none;
height:29px;
margin-top:8px;
left: 0;
position: absolute;
width: 100%;
text-decoration:none;
background-color:transparent;
padding-top:7px;
}


#bar1>li:hover>ul>li{
display:block;
background-color:transparent;
}
#bar1>li>ul>li{
display:none;
text-decoration:none;
}

#bar1>li>ul>li>a
{
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
color:#90908e;
text-decoration:none;
}

#bar1>li>ul>li>a:hover, #bar1>li>ul>li>a:active, #bar1>li>ul>li:hover>a,
{
font-family:Arial, Helvetica, sans-serif;
color:black;
}

li {
list-style-type:none;
}

.filler 
{
width:100%;
display:block;
height:0px;
}

所以简而言之，我只是想通过JS或JQuery来寻找一种方法来将hover替换为click函数。感谢您提供任何帮助和建议。

这是我的小提琴：http://jsfiddle.net/Broli/ms74wnry/

Answer 1

您可以使用此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内部，因此停止该事件永远不会到达元素，因此只能在#bar外点击将隐藏菜单。

查看此Fiddle ..

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

1 个答案: