Question

嘿伙计我有一个导航菜单等等一切正常。我添加了一个带有font-awesome箭头的类，当我点击不同的菜单项时，它会切换。当我点击特定链接时，菜单将被展开，javascript正在比较URL。不幸的是，当我点击一个链接时，菜单将被扩展，但我的课程已进入默认状态。我无法弄清楚我必须在代码中的哪个部分才能使这个工作。我将不胜感激任何建议，并希望有一个没有cookie或外部脚本的解决方案。据我所知，当我更改代码时，只有第一个符号发生变化或者所有符号都在变化但不是一个特定的。

这是我的主持人click上的一个工作示例这里是单击“two.html”页面，我想将展开菜单上的箭头符号更改为“向上”类（默认向下）

继承人fiddle（例如删除代码）

可以在测试现场看到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

如果您需要，可以使用本地存储来记住应用于元素的类，并在刷新/重新加载时重新应用它。

在JQuery中，它是这样的：

Output:
Game 1:
Cody
Game 2:
Billy
Bo
Carol
Kirsten
Nick

Answer 2

此处不需要使用cookie或本地存储，因为您不需要在页面之间保留数据。

我认为这里的主要问题是你没有切换上/下课程。当您单击div时，不检查该类当前是上升还是下降，因此您始终将Accordion中每个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

value

这里是完整的Javascript我希望有人可以帮助这个。使用实际脚本，它会记住已单击的链接，当您单击div时切换符号，并在页面刷新时更改展开菜单的特定符号。没有cookie或本地存储。感谢您对我的一些想法的帮助，我到目前为止得到了它。

objArray = objArray.map( function(value){ 
   var item = value.item; 
   var itemKeys = Object.keys(item); 
   for( var counter = 0; counter < itemKeys.length; counter++ ) 
   { 
     value[itemKeys[counter]] = item[itemKeys[counter]]; 
   } 
   delete value.item; 
   return value;
});

这里我还有一个更新的fiddle，没有无用的代码只是纯菜单。

如何在页面重新加载后保持div的类

3 个答案: