Question

我正在与Sidebar / Menu合作。它是使用Bootstrap，DJango和Javascript创建的。

基本上，我正在尝试编写Javascript，以便在点击菜单项时，背景会改变颜色（深蓝色），图标会改变颜色（浅绿色/绿松石），它会得到一种“楔形”

下面是已选择的菜单项（仪表板）以及尚未选择的菜单项（安全和消息）的示例。 “楔形”有一个红色箭头指向它。

以下是正在使用的HTML代码：

[... snip ...]

   <div class="page-container">

        <div class="page-sidebar-wrapper">

            <div class="page-sidebar navbar-collapse collapse">

                <ul class="page-sidebar-menu  page-header-fixed page-sidebar-menu-hover-submenu " 
                    data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
                    <li class="nav-item start active open">
                        <a href="{% url 'mainadmin:dashboard'  %}" class="nav-link nav-toggle">
                            <i class="fa fa-tachometer"></i>
                            <span class="title">Dashboard</span>
                            <span class="selected"></span>
                            <span class="arrow open"></span>
                        </a>
                    </li>
                    <li class="nav-item  ">
                        <a href="{% url 'mainadmin:security'  %}" class="nav-link nav-toggle">
                            <i class="fa fa-users"></i>
                            <span class="title">Security</span>
                            <span class="arrow"></span>
                        </a>
                    </li>

                     <li class="nav-item  ">
                        <a href="{% url 'mainadmin:in_progress' %}" class="nav-link nav-toggle">
                            <i class="fa fa-comment"></i>
                            <span class="title">Messages</span>
                            <span class="arrow"></span>
                        </a>
                        <ul class="sub-menu">
                            <li class="nav-item  ">
                                <a href="{% url 'mainadmin:in_progress' %}" class="nav-link ">
                                    <span class="title">List All Messages</span>
                                </a>
                            </li>
                            <li class="nav-item  ">
                                <a href="{% url 'mainadmin:in_progress' %}" class="nav-link ">
                                    <span class="title">List My Messages</span>
                                    <span class="badge badge-danger"></span>
                                </a>
                            </li>
                        </ul>
                    </li>

[... snip ...]

以下是Javascript代码：

        <script>
            $(document).ready(function () {
                $('.nav-item a').click(function(e) {

                $('.nav-item a').removeClass('selected');
                $('.nav-item a').removeClass('arrow');
                $('.nav-item a').removeClass('open');
                $('.nav-item a').removeClass('active');

        alert("I have gotten in");

                var $parent = $(this).parent();
                $parent.addClass('selected');
                $parent.addClass('arrow');
                $parent.addClass('open');
                $parent.addClass('active');


                e.preventDefault();
                });
            });

        </script>

我收到警报信息 - 但是 - 会发生什么：

- ＆GT;所选菜单项的背景确实会改变颜色 - 这是正确的
- ＆GT;所选菜单项的图标会改变颜色（浅蓝/绿松石） - 这是正确的
- ＆GT;所选菜单项不会出现箭头的勾号:(
- ＆GT;旧选择的菜单项不会“取消选择”

我做错了什么？

TIA

你好@Joe Lissner

非常感谢您的回复！

我必须添加以下内容才能使“楔形”部分起作用。它需要span标签

// REFERENCE: https://stackoverflow.com/questions/2013710/add-span-tag-within-anchor-in-jquery

$(this).append('<span class="selected"></span>');

$(this).append('<span class="arrow open"></span>');

虽然单击主菜单项时这是有效的，但在点击子菜单项时我并不是那么幸运。截至目前，我对Javascript很新。

如何让子菜单项工作？

此外，点击某个项目时，它不会转到“href =”中指定的页面如何更改代码，以便在单击菜单项时，它将转到“href =”

中指定的页面

再次感谢您的回复： - ）

Answer 1

您要从a代码中删除类，而不是.nav-item元素。

试试这个：

$(document).ready(function () {
    $('.nav-item a').click(function(e) {
        e.preventDefault(); // best practice to have this first, if you remove this line then the link will function as expected.

        var $parent = $(this).parent();
        var $arrow = $parent.find('.arrow');

        $('.nav-item').removeClass('selected arrow open active'); // simplified
        $('.nav-item .arrow').removeClass('open');
        $('.nav-item .selected').detach(); // remove the span that was there before

        alert("I have gotten in");

        $parent.addClass('open active'); // simplified
        $arrow.addClass('open').before('<span class="selected" />')
    });
});

修改 - 修正了箭头

的问题

Bootstrap边栏菜单的Javascript代码无效

1 个答案: