引导导航菜单的一些问题

Question

我在引导程序侧和顶部导航中找到了一些示例。我几乎按照我的意愿让它工作了，但有些事情我无法让它工作：

这是一个工作示例的jsFiddle。

1) 如何为菜单中的点击项添加活动类并从之前的项中删除活动类？

2) 如何在展开菜单和关闭返回左箭头时将图标更改为向下箭头？

3) 我在互联网上找到的所有具有与此类似的管理面板的示例都有独立的页面。因此，如果有人点击菜单项，它会再次加载头部、正文部分和所有脚本，所以我决定创建一个带有顶部和左侧导航的文件，并且只加载菜单项上的内容，点击如下：

$(".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");

希望对你有所帮助。