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

查看:233
本文介绍了如何使CSS下拉菜单点击下拉菜单的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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



这是一个小提琴



我正在使用jquery,但不知道该怎么做。



html代码

 < ul class =dropdown > 
< li>< a href =#>请选择< / a>
< ul class =sub_menu>
< li>
< a href =#>人造草坪< / a>
< ul>
< li>< a href =#>室内< / a>< / li>
< li>< a href =#> Outdoor< / a>< / li>
< / ul>
< / li>
< li>
< a href =#>击球笼< / a>
< ul>
< li>< a href =#>室内< / 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;放大:1;背景:#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;
颜色:#222; }
ul.dropdown li:last-child a {border-right:none; } / *在IE * /
中无法正常工作b.bull.Leff,
ul.dropdown li:hover {background:#F3D673;颜色:黑色位置:亲戚; }
ul.dropdown li.hover a {color:black; }


/ *
LEVEL TWO
* /
ul.dropdown ul {width:220px;能见度:隐藏;位置:绝对顶部:100%;左:0; }
ul.dropdown ul li {font-weight:normal;背景:#f6f6f6;颜色:#000;
border-bottom:1px solid #ccc; float:none; }

/ * IE 6& 7需要内嵌块* /
ul.dropdown ul li a {border-right:none;宽度:100%;显示:inline-block; }

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


解决方案

正如我在您的css中注意到的,显示或隐藏ul-s,因此您应该使用此代码

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

你也应该从你的css中删除这一行

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



关闭标签使用此代码

  $(。dropdown ul)css({visibility:hidden}); 
});

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

最后一部分取自此stackoverflow问题如何检测元素之外的点击?



还可以修改位置更改,如果悬停将您的css中的2行更改为此

  ul.dropdown li {font-weight:bold ; float:left;放大:1;背景:#ccc;位置:亲戚; } 


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.

This is a Fiddle

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

The html codes

 <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​

The CSS code

/* 
    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; }​

解决方案

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" });
    })​

and you should also remove this line from your css

ul.dropdown li:hover > ul { visibility: visible; }​

to close tabs use this code

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

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

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

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆