引导导航菜单的一些问题

Question

我在引导侧和顶部导航中找到了一些示例。 我几乎可以按需使用它，但是有些事情我无法使它起作用：

这是一个工作示例的jsFiddle 。

1）如何在菜单中的单击项中添加活动班级，以及如何从之前的活动班级中删除活动班级？

2）展开菜单并关闭时，如何将图标更改为向下箭头？

3）我在互联网上找到的所有与此管理面板相似的示例都具有独立的页面。 因此，如果有人单击菜单项，它将再次加载Head，Body和所有脚本，因此我决定创建一个具有顶部和左侧导航的文件，并且仅在菜单项click上加载内容，例如：

$(".side-nav a").click(function(e) {
    e.preventDefault();
    $("#page-wrapper").load($(this).attr("href"));  //some filename.php 
});

这是正确的方法吗？ （我注意到我必须删除Order deny,allow Deny from all删除.htaccess）

Answer 1

对于第一个问题，您应该从PHP代码中获取当前页面，并将其与单击的链接（a）进行比较，以便随后可以在页面加载时检查激活了什么链接。 如果它是一个包含部分的页面，并且每个项目只是将用户传递给锚（项目ID）->您应该修复代码以使其很好，对不起，我现在没有时间再做更多了:(

$('.side-nav').on('click', function(e){
      $('a').removeClass('active');
      $(e.target).addClass('active');});  

对于第二个问题，请使用以下CSS

[aria-expanded="false"]  > i.fa-caret-left { transform: rotate(0deg); transition: all ease-in-out .4s; }
[aria-expanded="true"]  > i.fa-caret-left{ transform: rotate(-90deg);  transition: all ease-in-out .4s;}

对于第三个问题，我不确定我是否理解您的尝试。 如果我猜对了，那么您正在尝试在#wrapper元素中注入“ html”吗？ 如果是这样，可以的。

如果要重定向到$（this）.attr（“ href”）链接值，则应这样编写：

location.href = $(this).attr("href");

希望我能帮助你。