CSS下拉菜单 - 使用JavaScript

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

单击时,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>

回答(1)

2 years ago

您需要停止锚标记的默认事件 . 你可以删除href =“#”或者需要在事件上调用.preventDefault(),如下所示:

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

});