fe / YOHOBUYPC · Commits

Go to a project

Authored by xuqi
Commit 31a708c865d8256d062671a954f14263ed46b86b 1 parent d99837ba

senior options hover

Inline Side-by-side
Showing 3 changed files with 75 additions and 40 deletions
... ... @@ -185,29 +185,33 @@
<span class="iconfont">&#xe600;</span>
<div class="senior-up-icon"></div>
<div class="senior-sub hide" data-attr="{{attr}}">
{{#if showMulti}}
<span class="multi-select">多选 +</span>
{{/if}}
<ul class="clearfix check-container">
{{#each sub}}
<li class="attr">
<a href="{{href}}">
<span class="iconfont checkbox" data-id="{{id}}">&#xe613;</span>
<span>{{name}}</span>
</a>
</li>
{{/each}}
</ul>
<div class="btns">
<button class="multi-select-ok dis">确定</button>
<button class="multi-select-cancel">取消</button>
</div>
</div>
</li>
{{/each}}
</ul>
<div class="senior-sub-wrap">
{{#each seniorChose}}
<div class="senior-sub hide" data-attr="{{attr}}">
{{#if showMulti}}
<span class="multi-select">多选 +</span>
{{/if}}
<ul class="clearfix check-container">
{{#each sub}}
<li class="attr">
<a href="{{href}}">
<span class="iconfont checkbox" data-id="{{id}}">&#xe613;</span>
<span>{{name}}</span>
</a>
</li>
{{/each}}
</ul>
<div class="btns">
<button class="multi-select-ok dis">确定</button>
<button class="multi-select-cancel">取消</button>
</div>
</div>
{{/each}}
</div>
</div>
</div>
{{/if}}
... ...
... ... @@ -32,6 +32,12 @@ var $udPrice = $('.ud-price-range'),
//分类相关变量
var $sortSub = $('.sort-sub-wrap');
//高级选项相关变量
var $seniorSubWrap = $('.senior-sub-wrap'),
$seniorAttrWrap = $('.senior-attr-wrap');
var seniorHoverTime, hoveredIndex;
//清除checkbox选中状态
function clearChecked($checkbox) {
$checkbox.removeClass('checked').html(checkUnicode.unchecked);
... ... @@ -241,15 +247,26 @@ if ($udPrice.length > 0) {
}
//【高级选项】鼠标移入显示子项
$('.senior-attr-wrap').on('mouseenter', '.attr', function() {
$(this).children('.senior-sub').removeClass('hide');
$seniorAttrWrap.on('mouseenter', '.attr', function() {
var index = $(this).addClass('hover').index();
$seniorSubWrap.children('.senior-sub:eq(' + index + ')').removeClass('hide');
}).on('mouseleave', '.attr', function() {
$(this).children('.senior-sub').addClass('hide');
var $this = $(this),
index = $this.index();
hoveredIndex = index;
seniorHoverTime = setTimeout(function() {
$seniorSubWrap.children('.senior-sub:eq(' + index + ')').addClass('hide');
$this.removeClass('hover');
hoveredIndex = -1;
}, 100);
});
//【高级选项】多选
$('.senior-sub').on('click', '.multi-select', function() {
$(this).closest('.sub').addClass('multi');
$(this).closest('.senior-sub').addClass('multi');
}).on('click', '.multi-select-ok', function() {
var $btn = $(this),
$sub = $btn.closest('.senior-sub'),
... ... @@ -266,4 +283,10 @@ $('.senior-sub').on('click', '.multi-select', function() {
});
uriLoc($sub.data('attr'), val);
}).on('mouseenter', function() {
clearTimeout(seniorHoverTime);
}).on('mouseleave', function() {
$seniorSubWrap.children('.senior-sub:eq(' + hoveredIndex + ')').addClass('hide');
$seniorAttrWrap.children('.attr:eq(' + hoveredIndex + ')').removeClass('hover');
hoveredIndex = -1;
});
\ No newline at end of file
... ...
... ... @@ -218,18 +218,27 @@
margin-bottom: -6px;
margin-right: 5px;
}
.senior-attr-wrap > .attr {
.senior {
padding-bottom: 6px;
.attr-content {
position: relative;
}
}
.senior-attr-wrap {
position: relative;
&:hover {
> .iconfont {
visibility: hidden;
}
}
.senior-up-icon {
display: block;
}
.senior-attr-wrap > .attr:hover,
.senior-attr-wrap > .attr.hover {
> .iconfont {
visibility: hidden;
}
.senior-up-icon {
visibility: visible;
}
}
... ... @@ -238,7 +247,7 @@
position: absolute;
padding: 15px 0;
left: 0;
width: 1050px;
right: 0;
top: 39px;
background: #fff;
border: 1px solid #eaeceb;
... ... @@ -259,15 +268,14 @@
}
.senior-up-icon {
position: absolute;
width: 15px;
width: 100%;
height: 9px;
z-index: 1;
left: 50%;
margin-left: -18px;
display: none;
margin-left: -11px;
visibility: hidden;
background: image-url('product/senior-up.png') no-repeat;
background-position-x: 50%;
}
.checkbox {
... ...