Question

使用OC v1.5.6.4 我希望将标题菜单的css状态保持为点击后单击

我将其作为菜单：

<div id="menu">
  <ul>
  <li><a href="#">Contact Us</a></li>
  <li><a href="#">Store</a>
        <div>
            <ul>
               <li><a href="#">Man</a></li>
               <li><a href="#">Woman</a></li>
               <li><a href="#">Accessories</a></li>
            </ul>
          </div>
   </li>
  </ul>
</div>

css 所以：

#m > ul > li > a {
    text-decoration: none;
}
#m > ul > li:hover > a {
    color:#000 !important;
}
#m > ul >  li > a.clicked {
    color: #823428;
    border-bottom: #823428 2px solid !important;;
}
#m > ul > li > div > ul > li > a {
    text-decoration: none;
}

我有jQuery脚本：

$(document).ready(function() {
$("a").click(function(e) {
    $("a", $("#menu")).each(function () {
        if( $(this).hasClass("clicked") )
            $(this).removeClass("clicked");
    });

    $(this).addClass("clicked");
    });
});

在释放鼠标按钮之前单击链接时，它会转到a.selected 但是在鼠标单击释放后，它不会保存类状态。

我做错了什么？它是重新加载的页面吗？例如：

example - not working

jsfiddle - working great

Answer 1

添加工作小提琴（根本不起作用 - 锚点没有提供href值，因此重定向不起作用，即使在你的小提琴中，子树也不起作用）我现在可以看到你想要达到的目的。

这不能在onclick事件之前（或期间）完成，但是在重新加载页面之后。您需要获取当前URL并手动（通过JS或PHP）将类clicked添加到其中包含该URL的列表项href属性...清除？< / p>

Answer 2

从来没有发布解决方案，所以这里：

JavaScript的：

$(function () {
    setNavigation();
});
function setNavigation() {
    var currentHref = window.location.href;

    $("#menu a").each(function () {
        console.log("currentHref = " + currentHref);
        console.log("window.location.href = " +  window.location.href);
        var href = $(this).attr('href');
        console.log("this_href = " + href);
        if (currentHref === href) {
            console.log("adding ACTIVE" + $(this).attr('href'));
            $(this).addClass('clicked');
        }
    });
}

OpenCart菜单a.clicked显示并消失

2 个答案: