javascript - 如何使用切换从 url 添加和删除值？

Question

我有以下代码，当用户单击切换以显示内容时，我想向 url ( http://www.somedomain.com/test.html#2111) 添加哈希和 id。关闭时我想删除#2111。

我如何使用切换按钮来做到这一点？

CSS

.toggle{
    display:inline-block;
    height:48px;
    width:48px;
    background:url("http://icons.iconarchive.com/icons/pixelmixer/basic/48/plus-icon.png");
}
.toggle:after{
    content:"View All";
    display:block;
    height:48px;
    line-height:48px;
    width:288px;
    margin-left:48px;
}
.toggle.expanded:after{
     content:"Close All";
}
.toggle.expanded {
    background:url("http://cdn2.iconfinder.com/data/icons/onebit/PNG/onebit_32.png");
}

JQUERY

$(document).ready(function () {
            var $content = $("div.moreinfo").hide();

            $(".toggle").on("click", function (e) {
                $(this).toggleClass("expanded");
                if($(this).hasClass('expanded')) {
                    $("div.plus").hide().removeClass("closed");
                    $("div.minus").show().addClass("opened");   

                } else {

                    $("div.plus").show().addClass("closed");    
                    $("div.minus").hide().removeClass("opened");


                }
                $content.slideToggle();

            });
        });

Answer 1

您可以将 location.hash 设置为一个空字符串:

location.hash = '';

或将其设置为一个值:

$(document).ready(function () {
    var $content = $("div.moreinfo").hide();
    $(".toggle").on("click", function (e) {
        $(this).toggleClass("expanded");
        if($(this).hasClass('expanded')) {
           location.hash = someValue;
        } else {
           location.hash = '';
        }
        $content.slideToggle();

    });
});