Как сделать так, чтобы событие нажатия jQuery сохранялось даже после обратной отправки страницы - PullRequest
Новая
       4

Как сделать так, чтобы событие нажатия jQuery сохранялось даже после обратной отправки страницы

4 голосов
/ 20 апреля 2011

У меня есть обработчик щелчков, который расширяет и сворачивает древовидное представление, я хочу какой-то механизм, в котором после постбека должен остаться тот же самый узел, который был развернут / свернут.HTML: 

 <ul>
        <li>Africa
            <ul>
                <li>Egypt</li>
            </ul>
            <ul>
                <li>SA</li>
            </ul>
        </li>
        <li>Asia
            <ul>
                <li>India</li>
                <li>China</li>
                <li>Japan</li>
            </ul>
        </li>
        <li>Europe
            <ul>
                <li>UK</li>
                <li>France</li>
                <li>Germany</li>
            </ul>
        </li>
        <li>America
            <ul>
                <li>US</li>
                <li>Mexico</li>
                <li>Argentina</li>
            </ul>
        </li>
    </ul>

jQuery: 

$(function () {
    $('li:has(ul)')
    .click(function () {

            var that = this;
            $('li:has(ul)').children().filter(':visible').parent().each(function (x) {
                if (this != that)
                    toggle(this);
            });
            toggle(this);

    })
    .children().hide();

    $('li:not(:has(ul))').css({ cursor: 'default', 'list-style-image': 'none' });
});

Любая помощь приветствуется !!

1 Ответ

1 голос
/ 20 апреля 2011

Вы можете попытаться закодировать URL после вашего URL, просто добавьте # и поля, которые должны отображаться как 

http://stackoverflow.com/questions/5727626#field1;field

или 

  http://example.com/your_action#field1;field

после этого URL разбора 

var fields = window.location.href.slice(window.location.href.indexOf('#') + 1).split(';');

и у вас будут поля для отображения

для раскрытия и свертывания нужно открыть URL с # в конце;

EDIT

вот как это сделать: Демо 

<ul>
    <li id='1'>Africa
        <ul>
            <li>Egypt</li>
        </ul>
        <ul>
            <li>SA</li>
        </ul>
    </li>
    <li id='2'>Asia
        <ul>
            <li>India</li>
            <li>China</li>
            <li>Japan</li>
        </ul>
    </li>
    <li id='3'>Europe
        <ul>
            <li>UK</li>
            <li>France</li>
            <li>Germany</li>
        </ul>
    </li>
    <li id='4'>America
        <ul>
            <li>US</li>
            <li>Mexico</li>
            <li>Argentina</li>
        </ul>
    </li>
</ul>

Javascript 

$(function () {

    $('li:has(ul)')
    .click(function () {

           var that = this;

        $('li:has(ul)').children().filter(':visible').parent().each(function (x) {
                if (this != that)
                    toggle(this);
            });
            $(this).children().toggle();
        if (window.location.href.indexOf('#')>0){
          var href = window.location.href.slice(0,window.location.href.indexOf('#'));
        }else{
            var href = window.location.href
        }

       var ids ='' 

        $('li:has(ul:visible)').each(
            function(){
              ids=ids+$(this).attr('id')+';'
            }
        );     

          window.location =  href +'#'+ids;
    })
    .children().hide();

    $('li:not(:has(ul))').css({ cursor: 'default', 'list-style-image': 'none' });
    var fields = window.location.href.slice(window.location.href.indexOf('#') + 1).split(';');

        for (var i in fields){
        $('li#'+i).children().toggle();
        }
});
...