頁面重新加載后如何保持div的類

Question

大家好，我有一個導航菜單，依此類推，一切正常。 我添加了一個帶有超棒字體的類，當我單擊不同的菜單項時，它會切換。 當我單擊特定鏈接時，一個javascript將比較URL，因此菜單將被展開。 不幸的是，當我單擊鏈接時，菜單將被展開，但是我的班級正進入默認狀態。 我不知道必須在代碼的哪一部分進行這項工作。 我將不勝感激任何建議，並希望有一個沒有Cookie或外部腳本的解決方案。 據我所知，當我更改代碼時，只有第一個符號發生變化，或者所有符號都發生變化，但沒有一個發生變化。

這是托管服務商的工作示例， 單擊此處是單擊 “ two.html”頁面，我希望將擴展菜單上的箭頭符號更改為“ up”類（默認為down）

這是小提琴 （例如刪除的代碼）

可以在測試站點上看到html

這是JavaScript

$(document).ready( function() {

            // initialize accordion
            $('#Accordion ul').each( function() {
                var currentURI = window.location.href;
                var links = $('a', this);
                var collapse = true;
                for (var i = 0; i < links.size(); i++) {
                    var elem = links.eq(i);
                    var href = elem.attr('href');
                    var hrefLength = href.length;
                    var compareTo = currentURI.substr(-1*hrefLength);

                    if (href == compareTo) {
                        collapse = false;
                        $(elem).css({ 'background-color': '#a7a9ac', 'color': '#000' });
                        break;
                    }


                };


                if (collapse) {
                    $(this).hide();

                }
            });


            $("#Accordion").delegate('div', 'click', function() {

                $('#Accordion div').removeClass( "up" );
                $('#Accordion div').addClass( "down" );
                var ul = $(this).next('ul');
                if (ul.is(':visible')) {
                    ul.slideUp(500);

                } else {
                    $('#Accordion ul').not(ul).slideUp(500);
                    ul.slideDown(500);
                    var div = $(this)
                $( this ).toggleClass( "up" );
                }


            });
        });

和CSS

    @charset "utf-8";
/* CSS Document */

body {
    font: 0.8em "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
    color: black;
    background: #F8F8FF;
}
body,html {
    margin: 0 auto;
    padding: 0;
    height:100%;
}

h2{margin-left:10px;padding-top:10px;}
p{padding-left:10px;}

body > #wrapper {height: auto; min-height: 100%;}


#wrapper {
    width: 990px;
    margin: auto;
    padding: 0;
    height:100%;
    border-left:1px solid #a7a9ac;
    border-right:1px solid #a7a9ac;
    border-bottom:1px solid #a7a9ac;
    -webkit-box-shadow: 0px 1px 26px 7px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 1px 26px 7px rgba(0,0,0,0.25);
box-shadow: 0px 1px 26px 7px rgba(0,0,0,0.25);

background: url(inhalt.png) repeat-y center top fixed;
}

#header{
    height:100px;
    background:#363636;
    color:silver;
    font: 4em "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
    line-height: 120px;
    padding: 0 20px;
    }

#navi{
    float:left;
    background:#F8F8FF;
    width:199px;
    margin: 0;
    padding: 0;
    height:100%;
    }

#text{
    float:right;
    width:760px;
    padding-left:10px;
    background:#F8F8FF;

    }


#nav2 {list-style: none;    padding: 5px 0 5px 0;text-align:center;margin:0;}

#foot a {vertical-align: -moz-middle-with-baseline; text-decoration: none;  color:white;text-align:center;}

#foot li a:hover {text-decoration:underline;color:white;text-align:center;}




#foot {
    color: white;
    text-align: center;
    background:#363636;
    height:30px;
    width:990px;
    margin: 0 auto;
    border:1px solid #363636;
    clear:both;
}

.top{color:black;text-decoration:underline;}
.top:hover{color:red;text-decoration:underline;}

#Accordion,#Accordion ul{
list-style:none;
padding:0;
margin:0;
}

.cssmenu {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9em;
    width:100%;
}
.border{border-bottom:1px solid #a7a9ac;}
.bordertop{border-top:1px solid #a7a9ac;}
.cssmenu li a {
    display: block;
    padding: 5px 20px;
    color: black;
    text-decoration: none;
    background:#DBDBDB;
}

.cssmenu ul li span{ display: block;
    padding: 5px 20px;

    background-color: #DBDBDB;
    border-top:1px solid #a7a9ac;
    cursor:pointer;
    color:#000;

}

.cssmenu a:hover {
  color: #FFF;
  background-color:#363636;
}.cssmenu span:hover {
  color: #FFF;
  background-color:#363636;
}
.submenu li a {
    display: block;
    padding: 5px 40px;
    color: black;
    text-decoration: none;
    background:#DBDBDB;
    border-top:1px solid #a7a9ac;
    }
    #test{


    }
  .down{    
      }
  .down::after  {
content: '\f107'; 
    color: black; 
  font-family: FontAwesome;
  position: absolute;
margin-top: -20px;
margin-left: 170px;
  } 

.up{    
      }
.up::after  {
content: '\f106'; 
    color: black; 
  font-family: FontAwesome;
  position: absolute;
margin-top: -20px;
margin-left: 170px;
  }

先感謝您

Answer 1

如果需要，可以使用Local Storage記住應用於元素的類，然后在刷新/重新加載時重新應用它。

在JQuery中是這樣的：

$(document).ready(function() {
    if(localStorage.getItem("storageItemName")) {
        $(target-element).addClass('myClass')
    }
});

$(window).unload(function() {
    localStorage.setItem("storageItemName", $(target-element).hasClass('myClass'));
});

Answer 2

這里不需要使用Cookie或本地存儲，因為您不需要在頁面之間保留數據。

我認為這里的主要問題是您沒有切換上/下課。 當您單擊div時，您無需檢查當前班級是上還是下班，因此您總是將手風琴中每個div的班級設置為down。 另外，您只想設置單擊的div的類。 並非手風琴中的每個div。 您應該執行以下操作：

$("#Accordion div").click(function() {
    // Get the next ul that will be expanded/collapsed
    var nextUL = $(this).next('ul');
    // Is the current div already expanded?
    if ($(this).hasClass("up")) {
        // The current div is already expanded. Collapse it.
        $(this).removeClass("up");
        $(this).addClass("down");
        nextUL.slideUp(500);
    } else if ($(this).hasClass("down")) {
        // The current div is currently collapsed. Expand it.
        $(this).removeClass("down");
        $(this).addClass("up");
        nextUL.slideDown(500);
    }
});

Answer 3

我知道了！

我必須做出正確的If-query

if($(this).css('display') == 'block')
                {
                    $(this).prev('div').removeClass( "down" );
                    $(this).prev('div').addClass( "up" );
                }

這是完整的Javascript，我希望有人能對此有所幫助。 使用實際的腳本，它可以記住已單擊的鏈接，當您單擊div時，它將切換符號，並且在刷新頁面時會更改擴展菜單的特定符號。 沒有Cookie或本地存儲。 謝謝您的幫助，並提供了一些想法，到目前為止，我已經知道了。

$(document).ready( function() {

            // initialize accordion
            $('#Accordion ul').each( function() {
                var currentURI = window.location.href;
                var links = $('a', this);
                var collapse = true;
                for (var i = 0; i < links.size(); i++) {
                    var elem = links.eq(i);
                    var href = elem.attr('href');
                    var hrefLength = href.length;
                    var compareTo = currentURI.substr(-1*hrefLength);
                    var div = $(this);
                    if (href == compareTo) {
                        collapse = false;
                        $(elem).css({ 'background-color': '#a7a9ac', 'color': '#000' });
                        break;
                    }
                };

                if (collapse) {
                    $(this).hide();
                }

                if($(this).css('display') == 'block')
                {
                    $(this).prev('div').removeClass( "down" );
                    $(this).prev('div').addClass( "up" );
                }

            });

            $("#Accordion").delegate('div', 'click', function() {

                $('#Accordion div').removeClass( "up" );
                $('#Accordion div').addClass( "down" );
                var ul = $(this).next('ul');
                if (ul.is(':visible')) 
                {
                    ul.slideUp(500);
                } 
                else 
                {
                    $('#Accordion ul').not(ul).slideUp(500);
                    ul.slideDown(500);
                    var div = $(this)
                    $( this ).toggleClass( "up" );
                }                   
            });             
        });

在這里，我還有一個更新的小提琴，沒有單純的菜單，沒有沒有用的代碼。