最近项目一个接着一个，之前说的精创环的项目还没做完，今天说先把那个放一下，先做访客系统，销售会见客户之后可以对客户进行一个跟踪记录，原型图也给了，今日头条的频道自定义页面一样。
如果是在IOS上让我来做我能很快搞定，但是让用web来做可是难着我了，由于上一博客也写了关于ul、li的导航的demo，我也知道这个也可以用ul、li来做，但是真自己动手做的时候完全不是那回事，搞了半天都没搞定，华为那边客户说让两天搞定，真是压力山大。今天晚上下班吃完饭就坐在电脑前来解决这个问题，功夫不负有心人，可算是解决了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="jquery-3.1.1.min.js"></script>
</head>
<style type="text/css"'>
div.menu
{
width:300px;
}
/* 所有class为menu的div中的ul样式 */
div.menu ul
{
list-style:none; /* 去掉ul前面的符号 */
margin: 5px; /* 与外界元素的距离为0 */
padding: 0px; /* 与内部元素的距离为0 */
width:auto; /*宽度根据元素内容调整*/
}
/* 所有class为menu的div中的ul中的li样式 */
div.menu ul li
{
float:left;
width:300px;
margin:0px;
font-size:24;
font-weight:bold;
}
div.menu ul li ul
{
list-style:none; /* 去掉ul前面的符号 */
margin: 0px; /* 与外界元素的距离为0 */
padding: 0px; /* 与内部元素的距离为0 */
width:auto; /*宽度根据元素内容调整*/
}
div.menu ul li ul li
{
float:left; /* 向左漂移，将竖排变为横排 */
width:auto;
}
ul button {
background:#fff;
border-width:0.5px;
border-color:gray;
display: block;
margin:5px;
padding: 4px 20px; /* 内部填充的距离 */
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
ul button.active{
background:gray;
border-color:transparent;
}
</style>
<body>
<div class="menu">
<ul>
<li>
<div>关键字1<div>
<ul signalSelect='0' id="key">
<li><button type='button'>按钮</button></li>
<li> <button type='button'>按钮</button></li>
<li> <button type='button'>按钮</button></li>
<li> <button type='button'>按钮</button></li>
</ul>
</li>
<li>
<div>类别<div>
<ul signalSelect='1' id="typeClass">
<li><button type='button' >按钮</button></li>
<li><button type='button' >按钮</button></li>
<li> <button type='button' >按钮</button></li>
<li> <button type='button'>按钮</button></li>
</ul>
</li>
</ul>
<button type='button' style="margin:30px;text-align:center;height:30px; width:120px;align:center;" id="saveBtn">保存</button>
</div>
</body>
<script>
$('ul button').click(function(){
$(this).toggleClass('active');
if($(this).parent().parent().attr('signalSelect')=='1')
{
$(this).parent().siblings().find("button").toggleClass('active',false);
}
});
$('#saveBtn').click(function(){
$('#key button.active').each(function(){
alert($(this).text());
});
});
</script>
</html>
1.这里要说明一下，不知道大家有没有注意，在ul中我增加了一个signalSelect属性，用它来做什么的呢，其实用它是来做单选和多选判断的，如果signalSelect=1，则是单选，否则是多选。
2.平时大家也会操作过类似的页面，在选中和取消选中的时候，button按钮选中状态会改变，不同的状态显示不同的样式，在上面的css中可以看到，给button定义button.active,那怎么判断按钮是active还是不是呢？这个就要用到jquery的toggleClass，$(selector).toggleClass(class,switch)，关于它的具体使用可以参考w3school.使用toggleClass可以改变样式，或者是新增、删除样式。
3.关于文字位置的问题，这个问题是困扰我很久的，回家自己又按照公司做的做了一遍，还是有问题，类别会跑到上面的那行，搞得我很郁闷，之前想着关键字、类别这些个li使用默认的float，而二级的li使用float:left，左浮动，但是这样子是有问题的，因为我设置display:block,一级的li宽度也没设置,导致错位。回来想了又想终于把这个bug解决了。首先是要设置大的div的宽度，不然一级二级的li的float都是left，这样会关键字并排着，设置宽度之和类别的那个li会自动在下面。
4.如何获得选中的按钮
这个问题我开始以为是很麻烦的问题，想着判断按钮是否是.active的状态，这个感觉不知道该怎么获得，不过在写css的时候使用ul button.active来设置选中的按钮，那也可以采用这样的方式直接过得选中的按钮。
