Question

我有一个带有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');
}

Here is the jsfiddle和一个片段：

＆＃13;

$('.dropdown-button').click(function() {
  if (!($(event.target).hasClass('dropdown-content') || $(event.target).parents('.dropdown-content').length > 0)) {
    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');
    }
  }
});
$('body').click(function() {
  if (($(event.target).parents('.dropdown-content').length === 0 && $(event.target).children('.dropdown-content').length === 0 && !$(event.target).hasClass('dropdown-content')) || ($(event.target).parents('.dropdown-content').length > 0 && $(event.target).parent().prop("tagName") === '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');
    }
  }
});

＆＃13;

.topmenu {
  display: inline-block;
  width: 200px;
  height: 42px;
  background-color: #17accc;
}

.topmenuitem {
  display: inline-block;
  width: 90px;
  height: 42px;
}

.userimage {
  position: relative;
  border-radius: 50%;
  vertical-align: middle;
  width: 29px;
  height: 29px;
  display: inline-block;
  cursor: pointer;
}

.hoversecondary:hover {
  background-color: #212121;
}

.secondarycolor {
  background-color: #212121;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  top: 50px;
  max-height: 200px;
  overflow-y: auto;
  text-align: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="topmenu">
  <div class="topmenuitem dropdown-button hoversecondary"><i class="fa fa-search fa-fw" aria-hidden="true">Q</i>
    <div class="dropdown-content" id="Q" aria-hidden="true">
      <a href="#"><span>Q1</span></a>
      <a href="#"><span>Q2</span></a>
    </div>
  </div>

  <div class="topmenuitem dropdown-button hoversecondary"><i class="fa fa-search fa-fw" aria-hidden="true">S</i> <img class="userimage" src="http://lorempixel.com/output/people-q-c-400-400-1.jpg" />
    <div class="dropdown-content" id="S" aria-hidden="true">
      <a href="#"><span>S1</span></a>
      <a href="#"><span>S2</span></a>
    </div>
  </div>
</div>
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

＆＃13;

如果单击menu-item-div的子项时，如何触发下拉列表？

Answer 1

我自己解决了。下拉列表始终显示正确，但是当按下另一个元素然后下拉内容时，触发了正文上的onclick。我更新了这样的条件：

readarray -t servers < <(
  ${_knife} search "chef_environment:dev AND role:myapp AND ec2_region:us-east-1"
    | ${_grep} IP | ${_awk} '{ print $2 }')

Addidionally我必须在函数中添加一个事件参数，以便它可以在firefox上运行。

Here is the updated fiddle

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

1 个答案: