如何使CSS下拉菜单点击下拉 [英] How to make CSS dropdown menu on click to dropdown

问题描述

如何使以下css下拉菜单只接受点击下拉菜单？例如，现在当鼠标悬停请选择。出现第二层。我想改为当点击请选择，第二层出现。此外，点击事件应适用于第二层菜单。

How to make the following css dropdown menu only accept click to dropdown? For example, now when mouse hover "Please Select". The second layer appears. I want to change to when click "Please Select", the second layer appears. Also the click event should apply to second layer menu.

这是一个小提琴

我使用jquery，但不知道该怎么做。

I'm using jquery but don't know how to do this.

HTML代码

 <ul class="dropdown">
        <li><a href="#">Please select</a>
            <ul class="sub_menu">
                 <li>
                     <a href="#">Artificial Turf</a>
                     <ul>
                        <li><a href="#">Indoor</a></li>
                        <li><a href="#">Outdoor</a></li>
                    </ul>                    
                </li>
                 <li>
                    <a href="#">Batting Cages</a>
                    <ul>
                        <li><a href="#">Indoor</a></li>
                        <li><a href="#">Outdoor</a></li>
                    </ul>
                 </li>
            </ul>
        </li>
    </ul​

CSS代码

/* 
    LEVEL ONE
*/
ul.dropdown                         { position: relative; }
ul.dropdown li                      { font-weight: bold; float: left; zoom: 1; background: #ccc; }
ul.dropdown a:hover                    { color: #000; }
ul.dropdown a:active                { color: #ffa500; }
ul.dropdown li a                    { display: block; padding: 4px 8px; border-right: 1px solid #333;
                                       color: #222; }
ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover                { background: #F3D673; color: black; position: relative; }
ul.dropdown li.hover a              { color: black; }


/* 
    LEVEL TWO
*/
ul.dropdown ul                         { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li                     { font-weight: normal; background: #f6f6f6; color: #000; 
                                      border-bottom: 1px solid #ccc; float: none; }

                                    /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a                    { border-right: none; width: 100%; display: inline-block; } 

/* 
    LEVEL THREE
*/
ul.dropdown ul ul                     { left: 100%; top: 0; }
ul.dropdown li:hover > ul             { visibility: visible; }​

推荐答案

以显示或隐藏ul-s，因此您应使用此代码

As I noticed in your css you use visibility to show or hide ul-s, so you should use this code

   $(".dropdown li").click(function() { 
        $(this).parent().children("li").not(this).children("ul").css({ "visibility":"hidden" });
        $(this).children("ul").css({ "visibility":"visible" });
    })​

，您也应该从css中移除此行

and you should also remove this line from your css

ul.dropdown li：hover > ul {visibility：visible; }

关闭标签使用此代码

$('html').click(function() {
   $(".dropdown ul").css({ "visibility":"hidden" });
 });

 $('.dropdown ').click(function(event){
     event.stopPropagation();
 });

这个stackoverflow问题的最后一部分如何检测元素外部的点击？

last part taken from this stackoverflow question How to detect a click outside an element?

在您的css中将鼠标悬停在位置更改的位置更改

also to fix position change in case of hover out change 2 line in your css to this

ul.dropdown li  { font-weight: bold; float: left; zoom: 1; background: #ccc; position: relative; }

这篇关于如何使CSS下拉菜单点击下拉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！