CSS下拉菜单-使用JavaScript

Question

我对JavaScript不太熟悉，但是在最初仅使用CSS构建的下拉菜单方面需要一些帮助。 随着页面的开发，我们让开发人员使用存储在.js文件中的信息添加一些JavaScript以自动填充列表项（li）。

单击时，JavaScript链接不会完全刷新页面。 这些链接只是从我们的.js文件中提取内容并更新页面上的内容。 它不会关闭下拉菜单。 如何获得点击后折叠的下拉菜单？

这是当前（运行中）导航栏上半部分的代码。

    <div class="row" style="padding-bottom: 15px; z-index: 3;">
        <div class="col-lg-12 topmenu" ng-controller='HeaderCtrl' top-nav=''>

                <ul>
                    <li class="drop">
                    <a href="#">Color</a>
                    <ul class="hiddennav three-col">
                        <!-- <ul class='colors-ul'> -->
                        <li ng-repeat='color_name in uniq_colors'>
                        <a ng-bind='color_name' ng-href='#/?color={{color_name}}'></a>
                        </li>
                    </ul>
                    </li>

Answer 1

您需要停止锚标记的默认事件。 您可以删除href =“＃”或需要在事件上调用.preventDefault（），如下所示：

document.querySelector('your-selector').onclick = function(Event) {
  Event.preventDefault();
  // do the things

});