最近项目一个接着一个，之前说的精创环的项目还没做完，今天说先把那个放一下，先做访客系统，销售会见客户之后可以对客户进行一个跟踪记录，原型图也给了，今日头条的频道自定义页面一样。

如果是在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来设置选中的按钮，那也可以采用这样的方式直接过得选中的按钮。

ul、li模仿ios的TableView实现城市选择的更多相关文章

  1. js模仿ios select效果

    github:https://github.com/zhoushengmufc/iosselect webapp模仿ios下拉菜单 html下拉菜单select在安卓和IOS下表现不一样,iossel ...

  2. js：for循环ul/li，获取当前被点击元素的id，以及给其他li设置属性

    js:for循环ul/li,获取当前被点击元素的id,以及给其他li设置属性 <!doctype html> <html> <head> <meta char ...

  3. ul li设置横排，并除去li前的圆点

    效果预览:http://hovertree.com/texiao/css/ 如何用CSS制作横向菜单 让ul li横向排列及圆点处理 我们先建立一个无序列表,来建立菜单的结构.代码是: <ul& ...

  4. 使用CSS把ul,li制作成表格

    查看效果:http://hovertree.com/texiao/css/7.htm 具体实现请看样式部分. 完整代码: <!DOCTYPE html> <html> < ...

  5. html ul li的学习

    DIV+CSS里,我们用得最多的就是ul li来显示数据,如新闻按钮等. <div id="menu"> <ul> <li><a href ...

  6. ul li 下的元素内容垂直居中

    CSS: <style> * {;; } li { list-style: none; } li span { border: 1px solid red; height: 100px; ...

  7. DIV UL LI

    <style type="text/css"> .productDetailTabNav{ width:960px;} .productDetailTabNav ul{ ...

  8. 怎样去除ul li a标签文字下的下划线

      这个主要是text-decoration属性,颜色的话就是普通的了 <style> ul li a{ text-decoration:none; } ul li a { color: ...

  9. ul li横向排列及圆点处理

    如何用CSS制作横向菜单 让ul li横向排列及圆点处理   第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...

随机推荐

  1. 【转载】CentOS 6.3下rsync服务器的安装与配置

    一.rsync 简介 Rsync(remote synchronize)是一个远程数据同步工具,可通过LAN/WAN快速同步多台主机间的文件,也可以使用 Rsync 同步本地硬盘中的不同目录. Rsy ...

  2. goldengate初始化

    对丢弃已久的goldengate环境重新配置,使其重新开始跑起来 环境是一个主机上的两个库,都是单机,所以也就没配pump进程了,trail file都是在一个文件夹下的,extract写trail ...

  3. 用struts2获取session、request、parmeter的方法

    package com.hanqi.action; import java.util.Map; import com.opensymphony.xwork2.ActionContext; public ...

  4. MySQL binlog 组提交与 XA(两阶段提交)

    1. XA-2PC (two phase commit, 两阶段提交 ) XA是由X/Open组织提出的分布式事务的规范(X代表transaction; A代表accordant?).XA规范主要定义 ...

  5. JVM探索之内存管理（三）

    上节我们介绍了JVM垃圾回收的原则,还有几个垃圾收集算法:标记-清除算法.复制算法.标记整理算法.分代收集算法:现在将要说HotSpt的垃圾收集器,这小节将只是理论. Java虚拟机规范对垃圾收集器的 ...

  6. sizeof和strlen()区别

    sizeof关键字和strlen()标准函数都可以用来测试字符串的长度,但是两者有很大的不同 sizeof只能在本函数内, 使用""和不指定长度的字符数组中才能测出字符串的真实长度 ...

  7. linux cpu占有率居高不下 调试

    今天调试程序,使用top命令后,发现程序的cpu占有率很高,一直在99,这很可怕,所以来调试. 使用top命令,得如下结果 PID USER PR NI VIRT RES SHR S %CPU %ME ...

  8. 中科院分词ICTCLAS导入用户词典后分词结果一样？

    package ICTCLAS.I3S.Test; import java.io.UnsupportedEncodingException; import ICTCLAS.I3S.AC.ICTCLAS ...

  9. AI(Adobe Illustrator)简单入门——米老鼠

    成果: 步骤如下: 一.新建文档 二.选椭圆工具,在画布中间点一下,画一个100px*100px的圆,如下 三.同上,再画两个50px*50px小圆.点左上角的选择工具,点小圆中心,放好位置. 四.全 ...

  10. c++学习之容器细枝末节（1）

    对照着c++primier 开始学习第九章容器,把课后习题当做练习,虽然是看过书上的讲解,但是做题编程的时候,一些需要注意的地方还是难免有遗漏. 一下是几点印象比较深刻的总结: (1)前几章只学了ve ...