Question

我修改了我的HTML和CSS。任何人都可以建议如何在下拉列表外部而不是在内部点击时隐藏复选框列表下拉列表。仅在＆＃34; OK＆＃34;点击它应该隐藏在里面。

＆＃13;

$('body').mouseup(function(e) {
  var container = $('#dropdowngroup');
  if (!container.is(e.target) && container.has(e.target).length == 0) {
    container.hide();
  }
});

＆＃13;

在下面的下拉箭头图片中找到。

以下脚本无法正常运行

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="tabpanel" class="tab-pane" id="detailReport">

  <div class="box-table">
    <table class="table detailreport text-center" id="DetailReportGrid" width="100%" style="position:relative;  height:50px;">
      <thead style="position:relative;">
        <tr style="position:relative;">
          <th align="center" width="8%" style="position:relative;">Date</th>
          <th align="center" width="8%" style="position:relative;">Time</th>


          <th align="center" width="13%" style="position:relative;" index=5 name="groupName">
            Group Name
            <div class="down-arrow-wrapper" id="dropdowngroup">
              <a href="#" class="down-arrow"></a>
              <ul class="checkbox-list" id="ul_Groups"></ul>
            </div>
          </th>
      </thead>
    </table>
  </div>
</div>

＆＃13;

{{1}}

＆＃13;

下拉菜单不是按钮（澄清）。＆＃34;群组名称＆＃34;有一个向下箭头，箭头是唯一的href。

Answer 1

你想要这样吗？

我已更改JS以收听body上的每次点击事件，并在点击的目标为a且父级为#dropdowngroup时做出反应。如果是，则会显示#ul_Groups，如果点击位于#ul_Groups，则会显示相同的内容。

＆＃13;

$("body").click(function(event) {
  if (event.target.nodeName == "A" && $(event.target).parent().attr('id') == "dropdowngroup" || $(event.target).parent().attr('id') == "ul_Groups") {
    $('#ul_Groups').show();
  } else {
    $('#ul_Groups').hide();
  }
});

＆＃13;

#ul_Groups {
  display: none;
}

.down-arrow-wrapper {
  display: inline-block;
  position: relative;
  margin: 0 0 0 3px
}

.down-arrow {
  background-image: url("https://i.stack.imgur.com/uiDSf.png");
  width: 10px;
  height: 10px;
  display: inline-block;
  float: right;
  margin: 3px 0 0
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="tabpanel" class="tab-pane" id="detailReport">

  <div class="box-table">
    <table class="table detailreport text-center" id="DetailReportGrid" width="100%" style="position:relative;  height:50px;">
      <thead style="position:relative;">
        <tr style="position:relative;">
          <th align="center" width="8%" style="position:relative;">Date</th>
          <th align="center" width="8%" style="position:relative;">Time</th>


          <th align="center" width="13%" style="position:relative;" index=5 name="groupName">
            Group Name
            <div class="down-arrow-wrapper" id="dropdowngroup">
              <a href="#" class="down-arrow"></a>
              <ul class="checkbox-list" id="ul_Groups">
                <li>hello</li>
              </ul>
            </div>
          </th>
      </thead>
    </table>
  </div>
</div>

＆＃13;

如何在外部点击关闭下拉列表？

1 个答案: