Здравствуйте, меня интересует как можно сделать так чтобы при перезагрузке раскрывающийся список не скрывался и оставался в том же положении. Рекомендовали local storage, но тогда вопрос, что туда записывать?
$(document).ready(function() {
$(".ul-dropfree").find("li:has(ul:has(li))").prepend('<div class="drop"></div>');
$(".ul-dropfree div.drop").click(function() {
if ($(this).nextAll("ul").css('display') == 'none') {
$(this).nextAll("ul").slideDown(400);
$(this).css({
'background-position': "-22px 0"
});
}
else {
$(this).nextAll("ul").slideUp(400);
$(this).css({
'background-position': "0 0"
});
}
});
$(".ul-dropfree").find("ul").slideUp(400).parents("li").children("div.drop").css({
'background-position': "0 0"
});
});
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;
}
ul.ul-treefree li:last-child {
border-left:0 none;
}
ul.ul-dropfree div.drop {
width:12px;
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;
}
<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>