不点击字母时布局如图1，点击后出现城市，然后点击的字母所在行上移到顶，如果点第二行的字母就两行上移，第三行的字母就三行上移，麻烦提供一下代码，十分感谢！
浏览 1.1k
已采纳
js+css怎么实现点击改变div的位置
- 点赞
- 写回答
- 关注问题
- 收藏
- 分享
- 邀请回答
微信扫一扫3条回答 默认 最新
- 熙決 2019-05-07 09:12已采纳
<!DOCTYPE html> <html> <head> <title></title> <meta content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <style type="text/css"> body {margin: 0;padding: 0} .clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} .all {height: 100vh;background: #273385;} .words {position: absolute;width: 100%;bottom: 0;} .words ul {list-style: none;margin: 0;clear: both;padding: 0;zoom: 1;} .words ul li {float: left;height: 40px;text-align: center;width: 16.6666666%;line-height: 40px;margin: 5px 0;} .words ul li a {display: block;height: 100%;width: 40px;margin: 0 auto;background: rgba(90, 79, 180, 0.5);color: #a3a2fe;border-radius: 50%;} .select {width: 100%;height: calc(100vh - 275px);overflow-y: scroll;} .select ul li {float: none;width: 100%;} .select ul li a {border-radius: 0;width: 92%;text-align: left;color: #fff;background: none;border-bottom: 1px solid #5251cc;} .search {position: fixed;display: block;width: 85%;left: 0;right: 0;margin: auto;top: 10px;height: 35px;border-radius: 20px;border: none;padding-left: 15px;background: rgba(68, 119, 255, 0.5);color: #fff;} .words ul li a.active{background: #315cf6;} </style> </head> <body> <div class="all"> <input type="text" placeholder="搜索城市" name="" class="search"> <div class="words clearfix"> <div class="item"> <ul class="clearfix"> <li><a>A</a></li> <li><a>B</a></li> <li><a>C</a></li> <li><a>D</a></li> <li><a>E</a></li> <li><a>F</a></li> </ul> </div> <div class="item"> <ul class="clearfix"> <li><a>G</a></li> <li><a>H</a></li> <li><a>J</a></li> <li><a>K</a></li> <li><a>L</a></li> <li><a>M</a></li> </ul> </div> <div class="item"> <ul class="clearfix"> <li><a>N</a></li> <li><a>O</a></li> <li><a>P</a></li> <li><a>Q</a></li> <li><a>R</a></li> <li><a>S</a></li> </ul> </div> <div class="item"> <ul class="clearfix"> <li><a>T</a></li> <li><a>X</a></li> <li><a>Y</a></li> <li><a>Z</a></li> </ul> </div> </div> </div> </body> <script type="text/javascript"> $('.item .clearfix li').click(function() { let str = ` <div class="select"> <ul> <li><a>${Math.random() * 100 + 50}</a></li> <li><a>${Math.random() * 100 + 50}</a></li> <li><a>${Math.random() * 100 + 50}</a></li> <li><a>${Math.random() * 100 + 50}</a></li> <li><a>${Math.random() * 100 + 50}</a></li> <li><a>${Math.random() * 100 + 50}</a></li> <li><a>${Math.random() * 100 + 50}</a></li> <li><a>${Math.random() * 100 + 50}</a></li> <li><a>${Math.random() * 100 + 50}</a></li> <li><a>${Math.random() * 100 + 50}</a></li> <li><a>${Math.random() * 100 + 50}</a></li> <li><a>${Math.random() * 100 + 50}</a></li> </ul> </div> `; let div = $(this).parents('.item'); $(this).siblings().children('a').removeClass('active'); div.siblings().find('a').removeClass('active'); $(this).children('a').addClass('active'); div.children('.select').remove(); div.siblings().children('.select').remove(); div.append(str); }); </script> </html>点赞 打赏 评论分享 - qq_22847605 2019-05-06 17:49
就看你代码结构了，这个其实如果能用css的top的值的规律来控制每行到顶部的距离，那么这道题目就很容易解了，不然看能不能用点击行和顶行的值的交换法进行操作。如果必须要顶行移动的时候必须处在新的顶行的下面（即第二行的话），用top规律，如果没办法，就重新局部刷新这个排列，重新赋值啦
点赞 打赏 评论分享 - 氪精大佬 2019-05-06 20:45
就获取元素改变css嘛，
我以一行为例，这一行全部绑定一个class属性: .change{position:relative;top:o}
var aaa=getElementByClassName('change').style.top
假如你想向上移动10个像素
aaa=-10px
具体条件什么的就在绑定的事件中写吧，原理就这样
希望对你有帮助点赞 打赏 评论分享