SUBMENU 的 CSS实现和 点击判断
SUBMENU 的 CSS实现和 点击判断
点击判断基础：
使用 mouseup 事件来控制点击除了SUBMENU-TITLE和SUBMENU-CONTENT其余文档隐藏 所有SUBMENU 的操作。
点击判断比较难以理解的部分：
点击SUBMENU-TITLE 和 SUBMENU-CONTENT 从而实现菜单的显示隐藏操作。
给每一个SUBMENU 添加 flag 属性，用于判断下拉菜单的状态从而根据状态做出相应的事件反映。
-- 点击事件
-- click submenu
-- judge flag
-- flag == shown
this hide
this.flag = hidden
-- flag == hidden
close all
all flag = hidden
this show
this.flag = shown
-- click other-place
close all
all flag = hidden
HTML 代码段如下( 部分CSS 借鉴了一个老外的样式)：
<!DOCTYPE html>
<html>
<head>
<title>dropdownMenu.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.outBox {
margin: 200px auto 0 auto;
padding: 0;
width: 143px;
}
.dropdown {
color: #555;
margin: 0;
width: 143px;
position: relative;
height: 17px;
text-align: left;
width: 143px;
}
/* 这里使用到了 CSS3 的一些技术比如 border-radius box-shadow 但是支持这些 CSS 属性的浏览器目前在国内比较少，IE9+ 才会有部分兼容 */
.submenu {
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border: 1px solid #6173a3;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(97, 115, 163, 0.45);
}
.dropdown li a {
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration: none;
}
.dropdown li a:hover {
background: #6173a3;
color: #FFFFFF;
text-decoration: none;
}
a.account {
font-size: 11px;
line-height: 16px;
color: #555555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(arrow.png) 116px 17px no-repeat;
cursor: pointer;
}
.root {
list-style: none;
margin: 0px;
padding: 0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top: 1px solid #dedede;
}
.submenus-li{
list-style: none;
width: 200px;
float: left;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".account").click(function() {
var flag = $(this).attr("flag");
if (flag == "shown") {
$(this).parent().find(".submenu").hide();
$(this).attr("flag", "hidden");
//$(this).parent().find(".submenu").slideUp(100);
} else {
$(".submenu").hide();
$(".account").attr("flag", "hidden");
$(this).parent().find(".submenu").show();
$(this).attr("flag", "shown");
//$(this).parent().find(".submenu").slideDown(100);
}
});
//Mouse click on sub menu
$(".submenu").mouseup(function() {
return false
});
//Mouse click on my account link
$(".account").mouseup(function() {
return false
});
//Document Click ，点击别处隐藏菜单 ...
$(document).mouseup(function() {
$(".submenu").hide();
$(".account").attr("flag", "hidden");
});
});
</script>
</head>
<body>
<ul id="submenus">
<li class="submenus-li"><div class="dropdown">
<a class="account" flag="hidden">My Account</a>
<div class="submenu">
<ul class="root">
<li><a href="#Dashboard">Dashboard</a></li>
<li><a href="#Profile">Profile</a></li>
<li><a href="#settings">Settings</a></li>
<li><a href="#feedback">Send Feedback</a></li>
<li><a href="#feedback">Send Feedback</a></li>
<li><a href="#feedback">Send Feedback</a></li>
<li><a href="#feedback">Send Feedback</a></li>
<li><a href="#feedback">Send Feedback</a></li>
</ul>
</div>
</div></li>
<li class="submenus-li"><div class="dropdown">
<a class="account" flag="hidden">Your Account</a>
<div class="submenu">
<ul class="root">
<li><a href="#Dashboard">Dashboard</a></li>
<li><a href="#Profile">Profile</a></li>
<li><a href="#settings">Settings</a></li>
<li><a href="#feedback">Send Feedback</a></li>
<li><a href="#feedback">Send Feedback</a></li>
<li><a href="#feedback">Send Feedback</a></li>
<li><a href="#feedback">Send Feedback</a></li>
<li><a href="#feedback">Send Feedback</a></li>
</ul>
</div>
</div></li>
<li class="submenus-li"><div class="dropdown">
<a class="account" flag="hidden">Our Account</a>
<div class="submenu">
<ul class="root">
<li><a href="#Dashboard">Dashboard</a></li>
<li><a href="#Profile">Profile</a></li>
<li><a href="#settings">Settings</a></li>
<li><a href="#feedback">Send Feedback</a></li>
<li><a href="#feedback">Send Feedback</a></li>
<li><a href="#feedback">Send Feedback</a></li>
<li><a href="#feedback">Send Feedback</a></li>
<li><a href="#feedback">Send Feedback</a></li>
</ul>
</div>
</div></li>
</ul>
</body>
</html>
另外因为 submenu 的事件控制问题继续来说下事件的相应判断。
结论：
整个事件要分成三段来进行处理
事件的产生
事件的冒泡
和事件的处理
1
首先事件的产生是独立的
比如鼠标事件中的
mousedown
click
mouseup
这三个事件虽然有先后顺序，但是都是独立的事件
这些事件的冒泡和事件处理是不会因为其他事件而产生改变的，事件的原子性 ...
2
使用委托的方式来进行事件处理的话
比如通过 delegate 的方式来进行事件委托
$(document).delegate("element","eventType","eventhandle");
这样的方式来进行事件委托的话
事件肯定是要冒泡到 document 之后才会进行事件的处理的
3
事件的处理
事件的处理很有意思
针对于一个事件比如 mouseup 事件
假如在父节点和子节点都进行了事件的监听，但是在子节点进行事件处理的时候 return false 这样会忽略父节点的事件处理,这个在上一篇日志当中已经进行了说明，不清楚的同学可以去看下。
4
事件委托不会交叉处理
而是一个事件一个事件的进行处理
比如一个 click 事件，这个事件会触发 3 个事件。
总是先处理 mouseup 然后再处理 click 这个可能和我们想象中的有所区别
你可能认为会先处理点击元素的 mouseup click 然后是 document 的 mouseup click
但是再回忆我们的原则 1 就豁然开朗了
事件本身就是分离的
重新制作变长的菜单,样式方面比较丑陋，大家见谅
后来又重新制作了一个 SUBMENU 里面使用了 ul li 来做定位操作，使用 dl dt dd 来完成内容的点击扩展。并且使用不同宽度的 dt dd 来实现很不同一般的菜单样式。下次再做扩展的话可以把 dt 换成相对应的 img 即可。
后来制作的菜单详细可见 dropmenuDesigned By Cherry 里面有比较详细的注释了。里面比较有意思的就是设置 position 为 relative 来实现submenu dd 的覆盖 dt 的操作。
<!DOCTYPE html>
<html>
<head>
<title>dropdownMenuByCherry.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
TIPS
1 在设计的使用使用 ul li 来进行基本框架的搭建 ul 只是作为父元素容器存在没有特殊意义
2 li 设置成 float left ，display block , 设置固定的宽度和高度(这里要使之和 dt 的宽度和高度一致)
3 具体的下拉菜单的类容使用 dl dt dd 来做，dl 作为 li 的子容器 dl 因为作为 sub menu 子容器要始终显示在最前端
4 dd 要设置背景色，用于遮盖,当然也可以不用遮盖。
5 ul li dl 都是用来进行布局的。实际的内容都在 dt dd 当中。
6 z-index 属性对 static 流不起作用，所以需要设置 dt dd 为 relative 从而完成菜单的覆盖操作
-->
<style type="text/css">
html,body {
margin: 0;
padding: 0;
}
#head,#body,#footer {
margin: 0 auto;
}
#head,#footer {
font-size: 20px;
font-weight: bold;
text-align: center;
}
.ul-box{
margin: 0;
padding: 0;
height: 42px;
}
.ul-box .li-box{
margin: 5px;
list-style: none;
width: 30px;
float: left;
display: block;
height: 20px;
}
.ul-box .li-box dl {
margin: 0;
padding: 0 0 10px 0;
}
.ul-box .li-box dl dt{
padding: 0;
margin: 0;
width: 30px;
border: 1px solid red;
cursor: pointer;
position: relative;
z-index: 1;
}
.ul-box .li-box dl dd{
padding: 0;
margin: 0;
display: none;
width: 50px;
border: 1px solid red;
cursor: pointer;
background-color: white;
position: relative;
z-index: 999;
}
.ul-box .li-box dl dd:HOVER{
background-color: red;
color: white;
}
.clear{
clear: both;
border: 1px solid red;
}
</style>
<script type="text/javascript">
$(function(){
/* submenu 点击弹出菜单事件 */
$("dt").click(function() {
var flag = $(this).attr("flag");
if (flag == "shown") {
$(this).parent().find("dd").hide();
$(this).attr("flag", "hidden");
//$(".submenu").slideUp(100);
} else {
$("dd").hide();
$("dt").attr("flag", "hidden");
$(this).parent().find("dd").show();
$(this).attr("flag", "shown");
//$(".submenu").slideDown(100);
}
});
//Mouse click on sub menu
$("dd").mouseup(function() {
return false
});
//Mouse click on my account link
$("dt").mouseup(function() {
return false
});
//Document Click ，点击别处隐藏菜单 ...
$(document).mouseup(function() {
$("dd").hide();
$("dt").attr("flag", "hidden");
});
})
</script>
</head>
<body>
<div id="head">DropBox Designed By Cherry</div>
<div id="body">
<ul class="ul-box">
<li class="li-box">
<dl>
<dt flag="hidden">a</dt>
<dd>num_1</dd>
<dd>num_2</dd>
<dd>num_3</dd>
<dd>num_4</dd>
</dl>
</li>
<li class="li-box">
<dl>
<dt flag="hidden">b</dt>
<dd>num_2</dd>
<dd>num_3</dd>
<dd>num_4</dd>
<dd>num_5</dd>
</dl>
</li>
<li class="li-box">
<dl>
<dt flag="hidden">c</dt>
<dd>num_3</dd>
<dd>num_4</dd>
<dd>num_5</dd>
<dd>num_6</dd>
</dl>
</li>
</ul>
<div>--------------------------------------</div>
<div>--------------------------------------</div>
<ul class="ul-box">
<li class="li-box">
<dl>
<dt flag="hidden">d</dt>
<dd>num_1</dd>
<dd>num_2</dd>
<dd>num_3</dd>
<dd>num_4</dd>
</dl>
</li>
<li class="li-box">
<dl>
<dt flag="hidden">e</dt>
<dd>num_2</dd>
<dd>num_3</dd>
<dd>num_4</dd>
<dd>num_5</dd>
</dl>
</li>
<li class="li-box">
<dl>
<dt flag="hidden">f</dt>
<dd>num_3</dd>
<dd>num_4</dd>
<dd>num_5</dd>
<dd>num_6</dd>
</dl>
</li>
</ul>
</div>
<div id="footer">[email protected]</div>
</body>
</html>