Question

我正在尝试使用bootstrap 4创建一个Facebook样式的下拉导航。我可以使用下面的代码创建可滚动的下拉列表，但我想固定第一个和最后一个元素，或者以某种方式实现该效果。我该怎么做？我尝试嵌套多个下拉菜单，但是也没有用。

var notification_count = 1;

function incr_notification_cnt() {

  notification_count += 1;
  console.log(notification_count)
}

$('.dropdown').on({
  "click": function(event) {
    if ($(event.target).closest('.dropdown-toggle').length) {
      $(this).data('closable', true);
    } else {
      $(this).data('closable', false);
    }
  },
  "hide.bs.dropdown": function(event) {
    hide = $(this).data('closable');
    $(this).data('closable', true);
    return hide;
  }
});

.dropdown-item {
  width: 500px!important;
}

.dropdown {
  cursor: pointer;
}

.scrollable-menu {
  height: auto;
  max-height: 300px;
  overflow-x: hidden;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>

<body>
  <ul class="dropdown">
    <span class="material-icons" data-toggle="dropdown">email</span>
    <div class="dropdown-menu scrollable-menu">
      <a class="dropdown-item">This is a test message by termi

            <div>None</div>
          </a>
      <a class="dropdown-item">hollllaaaaa

            <div>Sept. 5, 2018, 11:01 a.m.</div>
          </a>
      <a class="dropdown-item">hollllaaaaa

            <div>Sept. 5, 2018, 11:33 a.m.</div>
          </a>
      <a class="dropdown-item">hollllaaaaa

            <div>Sept. 5, 2018, 11:51 a.m.</div>
          </a>
      <a class="dropdown-item">hollllaaaaa

            <div>Sept. 5, 2018, 11:52 a.m.</div>
          </a>
      <a class="dropdown-item">hollllaaaaa

            <div>Sept. 5, 2018, 12:11 p.m.</div>
          </a>
      <div class="dropdown-item" onclick="incr_notification_cnt()"><b>Show more</b></div>
    </div>
  </ul>
</body>

</html>

bootstrap 4下拉列表固定了最后一个和第一个元素

0 个答案: