php - Bootstrap 导航菜单的一些问题

Question

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

这里是 jsFiddle一个工作示例。

1)如何为菜单中点击的元素添加事件类，并从之前的元素中删除事件类？

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

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

$(".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 的) anchor -> 你应该将代码修复得很好，对不起，我现在没有时间做更多了:(

$('.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 元素中注入(inject)“html”吗？如果是这样，是的，你可以这样做。

如果你想重定向到 $(this).attr("href") 链接值，你应该这样写:

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

希望我对你有帮助。