jquery实现简单的点击显示剩余标题的效果
具体效果如下：当一级标题超过两个，请展示“查看剩余标题”
点击“查看剩余标题”，显示隐藏的其他一级标题
点击一级标题或右侧向下箭头，展开二级标题。当二级标题超过两个时，展示“查看剩余二级标题”。
点击“查看剩余二级标题”，展开其它隐藏的二级标题
点击二级标题右侧的弹窗按钮，在页面中心弹出一个区块和一个蒙层，区块中展示当前按钮所在一级标题和二级标题的index。点击蒙层，隐藏蒙层和区块。
具体布局如下：
<body>
<div id="popup">
<div class="index">
<span class="firstindex">0</span>
_
<span class="secondindex">0</span>
</div>
</div>
<div class="top">
区块标题
</div>
<div class="main">
<ul>
<li class="firstli"><span class="firsttitle">一级标题<span class="explain">一级标题说明</span><span class="down firstdown"> <i class="fa fa-angle-down"></i></span></span>
<ul class="secondul">
<li class="secondli">
<span class="secondtitle"><span>二级标题</span><span class="explain">二级标题说明</span></span>
<span class="popup">弹窗</span>
</li>
<li class="secondli">
<span class="secondtitle"><span>二级标题</span><span class="explain">二级标题说明</span></span>
<span class="popup">弹窗</span>
</li>
<li class="secondsearch">查看剩余二级标题 <i class="fa fa-angle-down"></i></li>
<li class="secondli">
<span class="secondtitle"><span>二级标题</span><span class="explain">二级标题说明</span></span>
<span class="popup">弹窗</span>
</li>
<li class="secondli">
<span class="secondtitle"><span>二级标题</span><span class="explain">二级标题说明</span></span>
<span class="popup">弹窗</span>
</li>
</ul>
</li>
<li class="firstli"><span class="firsttitle">一级标题<span class="explain">一级标题说明</span><span class="down firstdown"> <i class="fa fa-angle-down"></i></span></span>
<ul class="secondul">
<li class="secondli">
<span class="secondtitle"><span>二级标题</span><span class="explain">二级标题说明</span></span>
<span class="popup">弹窗</span>
</li>
<li class="secondli">
<span class="secondtitle"><span>二级标题</span><span class="explain">二级标题说明</span></span>
<span class="popup">弹窗</span>
</li>
<li class="secondsearch">查看剩余二级标题 <i class="fa fa-angle-down"></i></li>
<li class="secondli">
<span class="secondtitle"><span>二级标题</span><span class="explain">二级标题说明</span></span>
<span class="popup">弹窗</span>
</li>
<li class="secondli">
<span class="secondtitle"><span>二级标题</span><span class="explain">二级标题说明</span></span>
<span class="popup">弹窗</span>
</li>
</ul>
</li>
<li class="firstsearch">查看剩余一级标题 <i class="fa fa-angle-down"></i></li>
<li class="firstli"><span class="firsttitle">一级标题<span class="explain">一级标题说明</span><span class="down firstdown"> <i class="fa fa-angle-down"></i></span></span>
<ul class="secondul">
<li class="secondli">
<span class="secondtitle"><span>二级标题</span><span class="explain">二级标题说明</span></span>
<span class="popup">弹窗</span>
</li>
<li class="secondli">
<span class="secondtitle"><span>二级标题</span><span class="explain">二级标题说明</span></span>
<span class="popup">弹窗</span>
</li>
<li class="secondsearch">查看剩余二级标题 <i class="fa fa-angle-down"></i></li>
<li class="secondli">
<span class="secondtitle"><span>二级标题</span><span class="explain">二级标题说明</span></span>
<span class="popup">弹窗</span>
</li>
<li class="secondli">
<span class="secondtitle"><span>二级标题</span><span class="explain">二级标题说明</span></span>
<span class="popup">弹窗</span>
</li>
</ul>
</li>
<li class="firstli"><span class="firsttitle">一级标题<span class="explain">一级标题说明</span><span class="down firstdown"> <i class="fa fa-angle-down"></i></span></span>
<ul class="secondul">
<li class="secondli">
<span class="secondtitle"><span>二级标题</span><span class="explain">二级标题说明</span></span>
<span class="popup">弹窗</span>
</li>
<li class="secondli">
<span class="secondtitle"><span>二级标题</span><span class="explain">二级标题说明</span></span>
<span class="popup">弹窗</span>
</li>
<li class="secondsearch">查看剩余二级标题 <i class="fa fa-angle-down"></i></li>
<li class="secondli">
<span class="secondtitle"><span>二级标题</span><span class="explain">二级标题说明</span></span>
<span class="popup">弹窗</span>
</li>
<li class="secondli">
<span class="secondtitle"><span>二级标题</span><span class="explain">二级标题说明</span></span>
<span class="popup">弹窗</span>
</li>
</ul>
</li>
</ul>
</div>
</body>
jq代码如下：
; (function ($) {
'use strict';
$('.firstsearch').Select({
list: document.querySelectorAll('.firstli'),
search: $('.firstsearch')
})
var downonoff = 0//设置状态
$('.firstdown').on('click', function () {//状态为0显示下拉，为1隐藏
var aslist = $(this).parent().parent().find('.secondli');
$(this).parent().parent().parent().parent().find('.firstdown').html('<i class="fa fa-angle-down"></i>');
$('.secondsearch').Select({
list: $(this).parent().parent().find('.secondli'),
search: $('.secondsearch')
})
if ($(this).parent().parent().find('.secondul').css('display') == 'none') {
$(this).parent().parent().parent().find('.secondul').css('display', 'none');
$(this).parent().parent().find('.secondul').slideDown(200);
downonoff = 0;
}
if (downonoff == 0) {
$(this).html('<i class="fa fa-angle-up"></i>')
$(this).parent().parent().parent().find('.secondul').css('display', 'none');
$(this).parent().parent().find('.secondul').slideDown(200);
downonoff = 1;
} else {
$(this).html('<i class="fa fa-angle-down"></i>')
$(this).parent().parent().find('.secondul').stop().slideUp(200).parent().parent().parent().find('.secondul').slideUp(200);
downonoff = 0;
}
})
var onoff = 0;
$(document).on('click', '.popup', function (event) {
event.stopPropagation();
if (onoff == 0) {//点击弹窗显示相应的索引下标
$('#popup').css('display', 'block');
var firstindex = $(this).parent().parent().parent().index();
var secondindex = $(this).parent().index();
$('.firstindex').html(firstindex);
$('.secondindex').html(secondindex);
onoff = 1;
}
})
$(document).on('click', function (event) {
event.stopPropagation();
if (onoff == 1) {//点击页面隐藏弹出蒙版
$('#popup').css('display', 'none');
onoff = 0
}
})
})(jQuery);
这里将点击展开封装成了一个小功能：
; (function ($) {
'use strict';
$.fn.extend({
Select(options) {
var obj={}
var {list,search}=options
for (var i = 0; i < list.length; i++) {
if (list.length > 2) {//这里判断标题是否超过两个
$(list[i]).css('display', 'none');//让前两个显示，其他隐藏
$(list[0]).css('display', 'block');
$(list[1]).css('display', 'block');
}
}
$(list[1]).next().css('display', 'block');
search.on('click', function (event) {//点击展开显示所有，隐藏点击的框
for (var i = 0; i < list.length; i++) {
$(list[i]).css('display', 'block');
}
$(this).css('display', 'none');
})
}
})
})(jQuery);
179
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
