0

Здравствуйте, меня интересует как можно сделать так чтобы при перезагрузке раскрывающийся список не скрывался и оставался в том же положении. Рекомендовали 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>

1
  • Записывать тужа id'шники пунктов списка, которые открыты, например 24 ноя 2015 в 8:17

2 ответа 2

1

Предлагаю при каждом открытии/закрытии ветки записывать состояние ветки. Причем хранить только открытые. Поскольку у вас нету аттрибутов id у веток, придется запоминать номера элементов списка в виде некоторого ключа. При инициализации дерева скрывать те ветки "ключи" которых не записаны. Получается вот такой код:

$(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() {
        if ($(this).nextAll("ul").css('display') == 'none') {
            $(this).nextAll("ul").slideDown(400);
            $(this).css({
                'background-position': "-22px 0px"
            });
            // сохраняем состояние ветви
            treeState.setOpened(this);
        }
        else {
            $(this).nextAll("ul").slideUp(400);
            $(this).css({
                'background-position': "0px 0px"
            });
            // сохраняем состояние ветви
            treeState.setClosed(this);
        }
    });
    // эту часть немного переделал, чтобы скрывать только нужные ветви
    $(".ul-dropfree").find("ul").each(function(ix, branch) {
        $(branch).parent("li")
            .children("div.drop")
            .css({'background-position': "0 0"});
        if (treeState.isClosed(branch)) {
            $(branch).slideUp(400);
        }
    });
});

На всякий случай фиддл

Заметный недостаток решения в приведенном виде - если структура дерева изменяется нужно "забывать" состояние веток. В таких случаях чтобы корректно сохранять состояние дерева можно поменять механизм формирования ключей веток (например на id веток, data-*-параметры или даже на тексты веток если они уникальные)

1
  • @ArtemDoom вообще весь код дерева стОит оформить в виде объекта или класса. По-хорошему операции скрытия и показа веток должны иметь возможность быть вызванными вне обработчика события. 24 ноя 2015 в 11:28
1

Думаю этот скрипт отлично подойдет к этой задаче.

<script src="jquery.cookie.js"></script> <!--Ссылка на скрипт-->
Выбранные галочки будут запомнены и не исчезнут даже при перезагрузке страницы.<br /><br />
  <input type="checkbox" id="ch1"> <label for="ch1">Номер раз</label> <br />
  <input type="checkbox" id="ch2"> <label for="ch2">Номер два</label> <br />
  <input type="checkbox" id="ch3"> <label for="ch3">Номер три</label> <br /><br />

  <button onClick="javascript:clearCookie();">Сбросить Cookie</button>

  <script>
    // функция устанавливающая куки, хранящие состояния checkbox'ов
    function cookieFromCheckbox()
    {
      var ch = [];
      $("input:checkbox").each(function(){
        var $el = $(this);
        if($el.prop("checked"))
          ch.push($el.attr("id"));
      });

      $.cookie("checkboxCookie", ch.join(','));
    }

    // функция восстанавливающая состояния checkbox'ов по кукам
    function checkboxFromCookie()
    {
      if($.cookie("checkboxCookie") == null)
        return;
      var chMap = $.cookie("checkboxCookie").split(',');
      for (var i in chMap)
        $('#'+chMap[i]).prop("checked", true);
    }

    // функция сбрасывающая куки с значениями checkbox'ов
    function clearCookie()
    {
      $.cookie("checkboxCookie", null);
    } 

    // проверим, были ли установлены ранее кукисы с именем checkboxCookie.
    // если нет - установим их.
    var checkboxCookie = $.cookie("checkboxCookie");
    if(checkboxCookie == null)
    {
      cookieFromCheckbox();
      checkboxCookie = $.cookie("checkboxCookie");
    }
    else
      checkboxFromCookie();

    $("input:checkbox").change(function(){
      cookieFromCheckbox();
    });
  </script>
0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.