<style>
a, address, b, big, button,body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
margin: 0;
padding: 0;
}
body {
font: 12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;
-webkit-font-smoothing: antialiased;
color: #666;
background: #fff;
}
.select{
width: 1390px;
border: 1px dashed #ccc;
margin: 0 auto;
}
.select-frame{
border: 2px solid #ffa500;
}
.sl-key{
padding-left: 8px;
float: left;
width: 100px;
color: #999;
line-height: 34px;
}
.sl-value{
margin-left: 106px;
background-color: #fff;
padding-left: 10px;
padding-right: 130px;
overflow: hidden;
zoom: 1;
}
.sl-list{
overflow: hidden;
zoom: 1;
padding-top: 4px;
width: 1080px;
height: 30px;
}
.sl-list ul{
float: left;
/*overflow: hidden;*/
zoom: 1;
position: relative;
/*height: 30px;*/
list-style: none;
}
.sl-list li {
float: left;
_display: inline;
margin-right: 32px;
margin-bottom: 4px;
height: 26px;
line-height: 26px;
display: list-item;
text-align: -webkit-match-parent;
}
.sl-list li a{
cursor: auto;
position: relative;
padding-left: 18px;
float: left;
white-space: nowrap;
zoom: 1;
color: #666;
text-decoration: none;
}
.sl-list li a:hover {
color: #e4393c;
}
/*.select .sl-value .sl-list li a i:hover{
border-color: #e4393c;
}*/
.sl-list li a i{
position: absolute;
left: 0;
top: 6px;
background: url(images/search.ele.png) no-repeat 9999px 9999px;
display: none;
height: 12px;
width: 12px;
background-color: #fff;
border: 1px solid #ccc;
font-size: 0;
background-position: -1px -200px; /*点击为-107px*/
}
.select .sl-btn{
display: none;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}
.select .sl-ext{
position: absolute;
top: 6px;
right: 60px;
width: 120px;
height: auto;
line-height: 22px;
overflow: hidden;
zoom: 1;
}
.sl-ext a{
float: left;
height: 20px;
line-height: 20px;
border: 1px solid #ddd;
padding: 0 3px 0 18px;
position: relative;
background: #F8F8F8;
color: #333;
text-decoration:none
}
.sl-ext a i{
position: absolute;
display: block;
font-style: normal;
left: 3px;
top: 0;
width: 13px;
height: 20px;
background: url(images/search.ele.png) no-repeat 9999px 9999px;
transition: background-position .15s ease-in-out;
background-position: -1px -63px;
}
.sl-ext a:hover{
text-decoration: none;
color: #e4393c;
border-color: #e4393c;
}
.btn-primary{
display: inline-block;
margin-right: 8px;
line-height: 24px;
height: 24px;
border-radius: 2px;
background: #F7F7F7;
text-align: center;
text-decoration: none;
cursor: pointer;
border: 0;
padding: 0px 11px 6px;
color: #FFF;
background-color: #E74649;
background-repeat: repeat-x;
}
.btn-default{
display: inline-block;
line-height: 24px;
height: 24px;
border-radius: 2px;
background: #F7F7F7;
text-align: center;
text-decoration: none;
cursor: pointer;
border: 1px solid #DDD;
padding: 0px 11px 5px;
color: #666;
background-color: #f7f7f7;
background-repeat: repeat-x;
}
.btn-default:hover{
text-decoration: none;
box-shadow: 0 1px 1px rgba(0,1,1,.08);
cursor: pointer;
color: #666;
}
.btn-primary:hover{
text-decoration: none;
box-shadow: 0 1px 1px rgba(0,1,1,.08);
cursor: pointer;
}
.disable{
padding: 0px 11px 5px;
border: 1px solid #DDD;
background: #FFF;
cursor: default !important;
color: #CCC;
-webkit-filter: none;
opacity: .2;
}
.active{
background-position: -1px -84px;
}
</style>CSS的基本样式
界面结构
<div class="select">
<div class="sl-key">
<span>高速名称:</span>
</div>
<div class="sl-value">
<div class="sl-list">
<ul class="J-vlaueList">
<li class="selected">
<a href="#" rel="nofollow"><i></i>宣大高速</a>
</li>
<li class="selected">
<a href="#" rel="nofollow"><i></i>京石高速</a>
</li>
<li class="selected">
<a href="#" rel="nofollow"><i></i>荣乌高速</a>
</li>
<li class="selected">
<a href="#" rel="nofollow"><i></i>青银高速</a>
</li>
<li class="selected">
<a href="#" rel="nofollow"><i></i>黄石高速</a>
</li>
<li class="selected">
<a href="#" rel="nofollow"><i></i>宣大高速</a>
</li>
<li class="selected">
<a href="#" rel="nofollow"><i></i>京石高速</a>
</li>
<li class="selected">
<a href="#" rel="nofollow"><i></i>荣乌高速</a>
</li>
<li class="selected">
<a href="#" rel="nofollow"><i></i>青银高速</a>
</li>
<li class="selected">
<a href="#" rel="nofollow"><i></i>黄石高速</a>
</li>
<li class="selected">
<a href="#" rel="nofollow"><i></i>宣大高速</a>
</li>
<li class="selected">
<a href="#" rel="nofollow"><i></i>京石高速</a>
</li>
<li class="selected">
<a href="#" rel="nofollow"><i></i>荣乌高速</a>
</li>
<li class="selected">
<a href="#" rel="nofollow"><i></i>青银高速</a>
</li>
<li class="selected">
<a href="#" rel="nofollow"><i></i>黄石高速</a>
</li>
<li class="selected">
<a href="#" rel="nofollow"><i></i>宣大高速</a>
</li>
<li class="selected">
<a href="#" rel="nofollow"><i></i>京石高速</a>
</li>
<li class="selected">
<a href="#" rel="nofollow"><i></i>荣乌高速</a>
</li>
<li class="selected">
<a href="#" rel="nofollow"><i></i>青银高速</a>
</li>
<li class="selected">
<a href="#" rel="nofollow"><i></i>黄石高速</a>
</li>
<li class="selected">
<a href="#" rel="nofollow"><i></i>黄石高速</a>
</li>
<li class="selected">
<a href="#" rel="nofollow"><i></i>宣大高速</a>
</li>
<li class="selected">
<a href="#" rel="nofollow"><i></i>京石高速</a>
</li>
<li class="selected">
<a href="#" rel="nofollow"><i></i>荣乌高速</a>
</li>
<li class="selected">
<a href="#" rel="nofollow"><i></i>青银高速</a>
</li>
<li class="selected">
<a href="#" rel="nofollow"><i></i>黄石高速</a>
</li>
<li class="selected">
<a href="#" rel="nofollow"><i></i>黄石高速</a>
</li>
<li class="selected">
<a href="#" rel="nofollow"><i></i>宣大高速</a>
</li>
<li class="selected">
<a href="#" rel="nofollow"><i></i>京石高速</a>
</li>
<li class="selected">
<a href="#" rel="nofollow"><i></i>荣乌高速</a>
</li>
<li class="selected">
<a href="#" rel="nofollow"><i></i>青银高速</a>
</li>
<li class="selected">
<a href="#" rel="nofollow"><i></i>黄石高速</a>
</li>
</ul>
</div>
<div class="sl-btn">
<button class="btn-primary disable">确定</button>
<button class="btn-default">取消</button>
</div>
</div>
<div class="sl-ext">
<a href="#"><i></i>多选</a>
</div>
</div>需解决问题：如何用JS改变CSS的background-position值
不添加class，id 得到i标签
/*(function () {
var aElement = document.querySelector(".sl-ext a");
var iElement = document.querySelector(".sl-ext>a>i")
aElement.addEventListener('onmouseover',function () {
1.iElement.className="active"; 2..cssText
3. iElement.style.width=parseInt(iElement.style.backgroundPosition)+100+'px';
/!*window.getComputedStyle(iElement, null).backgroundPosition = '-1px -84px';*!/
})
})();*/
$(document).ready(function(){
/* 多选按钮事件 */
$(".sl-ext>a").mouseenter(function(){
$(".sl-ext>a>i").css("background-position","-1px -84px");
});
$(".sl-ext>a").mouseleave(function(){
$(".sl-ext>a>i").css("background-position","-1px -63px");
});
$(".sl-ext>a").click(function(){
/* $(".select").css("border","2px solid #ffa500");*/
$(".select").addClass("select-frame");
$(".sl-btn").css("display","block");
$(".selected>a>i").css("display","inline-block");
$(".sl-list").css("height","auto");
/*$(".sl-list").css("overflow","visible");*/
});
/* 高速公路点击事件 */
/*var selected = document.getElementsByClassName('.selected');
var iElement = selected.getElementsByTagName('i');
为什么不行或者var iElement = document.getElementsByClassName('.selected').getElementsByTagName('i')
for(var i=0;i<iElement.length;i++)
{
iElement[i].index = i;
iElement[i].onclick = function(x){
return function(){
console.log(x);
}
}(i)
}*/
$(".selected a").click(function (e) {
/*if($($(this).children()[0]).css("background-position","-1px -200px"))*/
$(this).toggleClass(function () {
if($($(this).children()[0]).css("background-position") == "-1px -200px"){
$($(this).children()[0]).css("background-position","-1px -107px");
$($(this).children()[0]).css("border-color","#e4393c");
}else {
$($(this).children()[0]).css("background-position","-1px -200px");
$($(this).children()[0]).css("border-color","#ccc");
}
});
/* 确定按钮显示隐藏事件 */
$($(".selected a").children()).each(function () {
if($(this).css("background-position") == ("-1px -107px")){
$(".sl-btn button:first").removeClass("disable");
return false;
} else{
// $("button:first").addClass("disable");
$(".sl-btn button:first").addClass("disable");
}
});
});
/* hover事件 */
$(".selected a").mouseenter(function(){
$($(this).children()).css("border-color","#e4393c");
});
$(".selected a").mouseleave(function(){
$($(this).children()).css("border-color","#ccc");
});
/* 取消事件 */
$(".btn-default").click(function () {
$(".select").removeClass("select-frame");
$(".sl-btn").css("display","none");
$(".selected>a>i").css("display","none");
$($(".selected a").children()).css("background-position","-1px -200px");
$(".sl-btn button:first").addClass("disable");
$(".sl-list").css("height","30px");
});
/* 未展开的单选事件 */
if ($(".selected>a>i").css("display") == ("none")){
$(".selected a").click(function (e) {
console.log("123");
});
}
});