如何动态更改响应式菜单标题？

Question

我想根据导航中的当前活动项动态更改响应式菜单的标题（我正在使用下拉菜单）。我已经实现了 bootstrap scrollspy，我只想要与我的标题相同的激活导航项。我需要一种方法来获取当前的活动导航，然后使用它来更改当前 id 中的 html 文本

<div class="menu toggle-menu">
                                <ul>
                                    <li id="current">Menu</li>
                                </ul>

                        </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="main-navigation responsive-menu">
                <ul class="navigation">
                <li><a class="toggle-menu" href="#home">Home</a></li>
                <li><a class="toggle-menu" href="#manf">Manufactory</a></li>
                <li><a class="toggle-menu" href="#dist">Distribution</a></li>
                <li><a class="toggle-menu" href="#partner">Partner Brands</a></li>
                <li><a class="toggle-menu" href="#barshala">BarShala</a></li>



                <li><a class="toggle-menu" href="#top" style="margin-top:30px">Team</a></li>
                <li><a class="toggle-menu" href="#career">Careers</a></li>
                <li><a class="toggle-menu" href="#contact">Contact Us</a></li>

            </ul>
            </div>

Answer 1

您可以添加类似于下面的 JQuery 事件来更改标题。

$('.responsive-menu').on('activate.bs.scrollspy', function () {
    var x = $("#navigation li.active > a").text();
     $("#current").html(x); // for changing the title of navbar
})