<ul class="ul-dropfree ul-treefree">
<li>
<p>1</p>
<ul>
<li>
<p>1.1</p>
</li>
<li>
<p>1.2</li>
<li>
<p>1.3</p>
<ul>
<li>
<p>1.1.1</p>
</li>
<li>
<p>1.1.2</p>
</li>
</ul>
</li>
<li>
<p>1.4</p>
</li>
</ul>
</li>
<li>
<p>2</p>
<ul>
<li>
<p>2.1</p>
</li>
<li>
<p>2.2</p>
<ul>
<li>
<p>2.2.1</p>
</li>
<li>
<p>2.2.2</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
ul.ul-treefree {
padding-left:25px;
padding-top: 10px;
}
ul.ul-treefree ul {
margin:0;
padding-left:6px;
}
ul.ul-treefree li {
position:relative;
list-style:none outside none;
margin:0;
padding:0 0 0 19px;
line-height:23px;
display: inline;
}
ul.ul-treefree li:last-child {
border-left:0 none;
}
ul.ul-dropfree div.drop {
width:11px;
height:12px;
position:absolute;
z-index:10;
top:9px;
left:-12px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAALCAIAAAD0nuopAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpinDlzJgNlgAWI09LScEnPmjWLoAImrHpIAkwMFAMqGMGC6X44GzkIsHoQooAFTTVQKdbAwxOigyMsmIh3MC7ASHnqBAgwAD4CGeOiDhXRAAAAAElFTkSuQmCC');
background-position:-11px 0;
background-repeat:no-repeat;
cursor:pointer;
}
$(document).ready(function() {
var treeState = { // объект, который хранит состояния веток
state: JSON.parse(localStorage.getItem('branchOpened')) || {},
setOpened: function(element) {
this.state[this._getKey(element)] = true;
this._save();
},
setClosed: function(element) {
delete this.state[this._getKey(element)];
this._save();
},
isClosed: function(element) {
return !this.state[this._getKey(element)];
},
_save: function() {
localStorage.setItem('branchOpened', JSON.stringify(this.state));
},
_getKey: function(element) {
var ixs = [];
$(element).parentsUntil('ul-dropfree', 'li')
.each(function(ix, item) {
ixs.unshift($(item).index());
});
return ixs.join(',');
}
};
$('.ul-dropfree').find('li:has(ul:has(li))').prepend('<div class="drop"></div>');
$('.ul-dropfree div.drop').click(function() {
var branch = $(this).nextAll('ul').first();
if (branch.css('display') == 'none') {
branch.slideDown(400);
$(this).css({'background-position': '-11px 0px'});
// сохраняем состояние ветви
treeState.setOpened(branch);
}
else {
branch.slideUp(400);
$(this).css({'background-position': '0 0'});
// сохраняем состояние ветви
treeState.setClosed(branch);
}
});
// эту часть немного переделал, чтобы скрывать только нужные ветви
$('.ul-dropfree ul').each(function(ix, branch) {
if (treeState.isClosed(branch)) {
$(branch).slideUp(400)
.prevAll('div.drop')
.css({'background-position': '0 0'});
}
});
});
Ссылка
jsfiddle.net/0dev/e62aa4e5
Помогите привести вот к такому виду, спасибо.
