如何在点击下拉菜单时制作 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; }​

推荐答案

正如我在您的 css 中注意到的，您使用可见性来显示或隐藏 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 { 可见性:可见；}

关闭标签使用此代码

$('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 中的 2 行更改为此

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屋！