jQuery：单击div或其子节点时触发下拉列表

我有一个菜单栏，以div作为项目。单击项目时，将打开一个下拉列表。如果用户单击其他地方，在下拉列表中的链接或其他菜单栏项上，下拉列表将消失。到现在为止，一直都还不错。但是，当单击菜单栏div的子项时，什么也不会发生

这是显示和隐藏逻辑：

var state = $(this).find('.dropdown-content').attr('aria-hidden');
if (state === 'true') {
  $('body').not(this).find('.dropdown-content').hide();
  $('body').not(this).find('.dropdown-content').attr('aria-hidden', 'true');
  if ($('body').find('.dropdown-content').parent().hasClass('secondarycolor')) {
    $('body').find('.dropdown-content').parent().addClass('hoversecondary');
    $('body').find('.dropdown-content').parent().removeClass('secondarycolor');
  }
  console.log('A' + $(event.target).attr('class'));
  console.log('B' + $(this).attr('class'));
  console.log('C' + $(this).find('.dropdown-content').attr('class'));
  $(this).find('.dropdown-content').attr('aria-hidden', 'false');
  $(this).find('.dropdown-content').show();
  if ($(this).hasClass('hoversecondary')) {
    $(this).addClass('secondarycolor');
    $(this).removeClass('hoversecondary');
  }
} else {
  $(this).find('.dropdown-content').hide();
  if ($(this).hasClass('secondarycolor')) {
    $(this).addClass('hoversecondary');
    $(this).removeClass('secondarycolor');
  }
  $(this).find('.dropdown-content').attr('aria-hidden', 'true');
}

还有一个片段：

$（'.下拉按钮'）。单击（函数（）{
if（！（$（event.target）.hasClass（'dropdown-content'）|$（event.target）.parents（'.dropdown-content'）.length>0））{
var state=$（this.find（'.dropdown content'）.attr（'aria-hidden'）；
如果（状态=='true'）{
$（'body'）.not（this.find（'dropdown content'）.hide（）；
$（'body'）.not（this.find（'dropdown content'）.attr（'aria-hidden'，'true'）；
if（$（'body'）.find（'.dropdown content'）.parent（）.hasClass（'secondarycolor'））{
$（'body'）.find（'dropdown content'）.parent（）.addClass（'hoversecondary'）；
$（'body'）.find（'dropdown content'）.parent（）.removeClass（'secondarycolor'）；
}
log（'A'+$（event.target）.attr（'class'）；
console.log（'B'+$（this.attr（'class'））；
console.log（'C'+$（this.find（'.dropdown content'）.attr（'class'））；
$（this.find（'.dropdown content'）.attr（'aria-hidden'，'false'）；
$（this.find（'.dropdown content'）.show（）；
if（$（this）.hasClass（'hoversecondary'））{
$（this.addClass（'secondarycolor'）；
$（this.removeClass（'hoversecondary'）；
}
}否则{
$（this.find（'.dropdown content'）.hide（）；
if（$（this）.hasClass（'secondarycolor'））{
$（this.addClass（'hoversecondary'）；
$（this.removeClass（'secondarycolor'）；
}
$（this.find（'.dropdown content'）.attr（'aria-hidden'，'true'）；
}
}
});
$（'body'）。单击（函数（）{
if（$（event.target）.parents（'.dropdown content'）.length==0&&$（event.target）.children（'.dropdown content'）.length==0&&$（event.target）.hasClass（$（dropdown-content'））|（$（event.target'）.parent（'.dropdown content'）.length>0&$（event.target）.parent（）.prop（“标记名”）=='A'））{
$（'body'）.find（'.dropdown content'）.hide（）；
$（'body'）.find（'dropdown content'）.attr（'aria-hidden'，'true'）；
if（$（'body'）.find（'.dropdown content'）.parent（）.hasClass（'secondarycolor'））{
$（'body'）.find（'dropdown content'）.parent（）.addClass（'hoversecondary'）；
$（'body'）.find（'dropdown content'）.parent（）.removeClass（'secondarycolor'）；
}
}
});
.topmenu{
显示：内联块；
宽度：200px；
高度：42px；
背景色：#17accc；
}
.topmenuitem{
显示：内联块；
宽度：90px；
高度：42px；
}
.userimage{
位置：相对位置；
边界半径：50%；
垂直对齐：中间对齐；
宽度：29px；
高度：29px；
显示：内联块；
光标：指针；
}
.hoversecondary:悬停{
背景色：#212121；
}
.第二种颜色{
背景色：#212121；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：120px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
顶部：50px；
最大高度：200px；
溢出y：自动；
文本对齐：左对齐；
}

Q
s

清单项目1
清单项目2
清单项目3
清单项目4
清单项目5
我自己解决了。下拉列表总是正确显示，但当按下其他元素时，会触发主体上的onclick，然后按下下拉列表内容。我更新了如下条件：

if (($(evt.target).parents('.dropdown-content').length === 0 && $(evt.target).children('.dropdown-content').length === 0 && !$(evt.target).hasClass('dropdown-content') && $(evt.target).parent().children('.dropdown-content').length === 0) || ($(evt.target).parents('.dropdown-content').length > 0 && $(evt.target).parent().prop("tagName") === 'A')) {

此外，我还必须在函数中添加一个事件参数，以便在firefox上运行