Javascript 如何修复a href标签可点击？

我有一个html css代码的通知下拉框的问题是我不能点击标签，同时我尝试与javaScript也不工作，我不能理解这个问题，请建议我如何使一个点击标签

$（'.toparea right>.setting area>li'）。打开（“单击”，函数（）{
$（this.sides（）.children（'div'）.removeClass（'active'）；
$（this）.children（'div'）.addClass（'active'）；
返回false；
});
//-------移除主体上的活动类
$（“body*”）。不是（'.toparea right>。setting area>li'）。在（“单击”，函数（）上）{
$（“.toparea right>.setting area>li>div”）.removeClass（'active'）；
返回true；
});
。下拉列表{
背景：#FFF无重复滚动0；
边框：1px实心#e1e8ed；
列表样式：外部无；
最大高度：294px；
溢出：自动；
左侧填充：0；
位置：绝对位置；
右：-175px；
文本对齐：左对齐；
顶部：55px；
宽度：440px；
不透明度：0；
可见性：隐藏；
-webkit转换：所有0.3s线性0；
-moz转换：所有0.3s线性0；
过渡：所有0.3s线性0；
}
.dropdowns.active{
不透明度：1；
能见度：可见；
}
.下拉菜单{
列表样式：外部无；
左侧填充：0；
}
.下拉菜单>li>a{
边框底部：1px实心#e1e8ed；
显示：内联块；
填充物：5px；
宽度：100%；
}
.下拉列表>h6{
字体大小：15px；
}
.drops菜单>li>.tag{
颜色：#fff；
显示：内联块；
字体大小：11px；
填充：0 6px；
位置：绝对位置；
右：0；
排名：0；
}
.drops菜单>li:n子项（2n）>a{
背景：白烟无重复滚动0；
}
.drops菜单>LIA img{
显示：内联块；
垂直对齐：中间对齐；
宽度：10%；
边界半径：100%；
边缘底部：10px；
左边距：10px；
高度：45px；
}
梅斯格梅塔{
显示：内联块；
左侧填充：30px；
垂直对齐：中间对齐；
宽度：-1%；
颜色：#000000；
衬垫顶部：-21px；
顶部：18px；
边际上限：0px；
线高：25px；
}
.mesg meta>h6{
字号：13.5px；
字号：600；
字母间距：0.3px；
页边距底部：0；
文本转换：大写；
左边距：-15px；
}
.mesg meta>span{
颜色：#000000；
显示：内联块；
字体大小：12px；
线高：15px；
溢出x：隐藏；
文本溢出：省略号；
空白：nowrap；
宽度：100%；
}
.mesg meta>i{
颜色：#000000；
字体大小：12px；
字体风格：普通；
左边距：-15px；
}
.下拉菜单>li>a:悬停{
背景：#fafa无重复滚动0；
}
.下拉列表>跨度{
边框底部：1px实心#ccc；
显示：内联块；
字体大小：14px；
填充：0px 10px；
文本对齐：居中；
宽度：100%；
高度：59px；
边际上限：0px；
}
.下拉列表>a.more-mesg{
显示：内联块；
字体大小：14px；
垫底：5px；
文本对齐：居中；
文本转换：大写；
宽度：100%；
}
.blue{背景：#337ab7；}
.red{背景：#ff0000；}
.green{背景：#33b7a0；}
.dropdowns.active>a{
背景：#fafa无重复滚动0；
显示：块；
字体大小：13px；
边缘底部：2px；
填充：0px 0px；
文本对齐：居中；
}
.dropdowns.active>a i{
字体大小：11px；
左：8px；
位置：绝对位置；
顶部：10px；
}
.下拉列表.语言{
宽度：100px；
}
.dropdowns.active>a:悬停{
背景：#F1F1无重复滚动0；
}



00






您的代码下拉列表中的内容永远都不可见

我认为，在点击“通知”时，您必须通过切换（添加和删除）
标签上的“活动”类来切换（隐藏/显示）下拉列表

一旦您的下拉列表可见。点击应该按照你的意愿工作

示例工作代码：

    <a href="#" class="a-left" onClick="toggleDropdownVisibility()">Notifications</a>
  <script>
    function toggleDropdownVisibility(event) {
      var notificationBell = event.target;
      if (notificationBell.classList.contains('active')) {
        notificationBell.classList.remove('active');
      } else {
        notificationBell.classList.add('active');
      }
    }
    </script>


功能切换DropDownVisibility（事件）{
var notificationBell=event.target；
if（notificationBell.classList.contains（'active'））{
notificationBell.classList.remove（'active'）；
}否则{
notificationBell.classList.add（'active'）；
}
}

除此之外，请删除
onclick=“window.location.href（'view-post.php'）”
as window.location.href不是一个函数，而是一个可以为其分配url的属性。比如
window.location.href='view-post.php'
。但是您可以完全删除此onclick，因为它不是必需的。
您的代码在这里看起来很好，只是我不明白为什么您在
下拉列表中有
不透明度：0
和
可见性：隐藏的
。这些使您的控件无法访问。
但是，一旦我删除了css中的这两个属性，它就为我工作了（在最新版本的Chrome上）

我的忠告是:

对于标记，您可以使用以下选项：
. 不需要太多的自定义JS。
我有这个解决方案，我试过了，它正在工作

<div class="toparea-right">
   <ul class="setting-area">
      <li>
         <a href="#"><i class="far fa-newspaper"></i></a>
         <span class="notifi-count" id="displayNotiCount">00</span>
         <a href="#" class="a-left">Notifications</a>
         <div class="dropdowns"  id="MmailNoti">
            <ul class="drops-menu">
               <li>
                  <a href="view-post.php" onclick="window.location.href('view-post.php')" title="">
                     <div class="mesg-meta-notification">
                        <h6>Bruce Wayne</h6>
                        <span>is commented in your post!</span>
                        <i>0 min ago</i>
                     </div>
                  </a>
               </li>
            </ul>
         </div>
      </li>
   </ul>
</div>

<script>
            // When the user clicks on div, open the popup
            function myFunction() {
                var popup = document.getElementById("MmailNoti");
                popup.classList.toggle("show");
            }
        </script>




00