甚至在页面回发后，如何使jQuery click事件仍然存在

问题描述

| 我有一个单击处理程序，它可以展开和折叠树状视图，我想要一种机制，在该机制中，在回发被展开/折叠的同一节点之后，应保持原样。 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\' });
});

任何帮助表示赞赏！

解决方法

您可以尝试在对url进行编码之后，只需添加

#

和应显示的字段 喜欢

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

要么

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

在解析网址之后

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

您将有待显示的字段 展开和折叠将需要以＃结尾的网址； 编辑 这是怎么做的： 演示版

<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>

Java脚本

$(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();
        }
});