草庐IT

javascript - 在可滚动容器中定位绝对下拉列表

coder 2023-08-07 原文

是否可以让position absolute dropdown停留在可滚动容器的顶部，并在滚动时随着position relative parent一起移动？现在，下拉菜单出现在可滚动区域内。

下面的截图是我想要实现的。如果需要，我也愿意接受 javascript 解决方案。

jsFiddle 

.navbar {
  padding-left: 0;
  white-space: nowrap;
  overflow: auto;
}

.navbar-item {
  position: relative;
  margin-left: 0;
  list-style: none;
  display: inline-block;
  width: 200px;
  text-align: center;
  border: 1px solid;
}

.dropdown {
  position: absolute;
  padding-left: 0;
  width: 200px;
  box-shadow: 0 1px 0 1px black;
  display: none;
}

.dropdown-item {
  margin-left: 0;
  list-style: none;
}

.navbar-item:hover .dropdown {
  display: block;
}
<ul class="navbar">
  <li class="navbar-item">
    <a>Item A</a>
    <ul class="dropdown">
      <li class="dropdown-item">Sub Item A</li>
      <li class="dropdown-item">Sub Item B</li>
      <li class="dropdown-item">Sub Item C</li>
    </ul>
  </li>
  <li class="navbar-item"><a>Item B</a></li>
  <li class="navbar-item"><a>Item C</a></li>
  <li class="navbar-item"><a>Item D</a></li>
  <li class="navbar-item"><a>Item E</a></li>
</ul>

最佳答案

一个简单的方法是使下拉菜单的位置固定，但要确保相应地应用左值和上值。另一种方法是将下拉菜单附加到 ul 元素之外，这样当它出现时就不会被包裹在其中。

.dropdown {
  position: fixed;
}


.navbar {
  padding-left: 0;
  white-space: nowrap;
  overflow: auto;
}

.navbar-item {
  position: relative;
  margin-left: 0;
  list-style: none;
  display: inline-block;
  width: 200px;
  text-align: center;
  border: 1px solid;
}

.dropdown {
  position: fixed;
  background-color: #fff;
  padding-left: 0;
  width: 200px;
  box-shadow: 0 1px 0 1px black;
  display: none;
}

.navbar-item {
  margin-left: 0;
  list-style: none;
}

.navbar-item:hover .dropdown {
  display: block;
}
<ul class="navbar">
  <li class="navbar-item">
    <a>Item A</a>
    <ul class="dropdown">
      <li class="dropdown-item">Sub Item A</li>
      <li class="dropdown-item">Sub Item B</li>
      <li class="dropdown-item">Sub Item C</li>
    </ul>
  </li>
  <li class="navbar-item"><a>Item B</a></li>
  <li class="navbar-item"><a>Item C</a></li>
  <li class="navbar-item"><a>Item D</a></li>
  <li class="navbar-item"><a>Item E</a></li>
</ul>

编辑

我又添加了一个不使用固定位置的片段。它在打开时根据父偏移量更改其坐标。

$('#menu1, #submenu1').mouseover(function(event) {
  $('#submenu1').addClass("show").css($('#menu1').offset());
});

$('#menu1, #submenu1').mouseleave(function(event) {
  $('#submenu1').removeClass("show");
});
.navbar {
  padding-left: 0;
  white-space: nowrap;
  overflow: auto;
}

.navbar-item {
  position: relative;
  margin-left: 0;
  list-style: none;
  display: inline-block;
  width: 200px;
  text-align: center;
  border: 1px solid;
}

.dropdown {
  position: absolute;
  padding-left: 0;
  width: 200px;
  box-shadow: 0 1px 0 1px black;
  display: none;
}

.dropdown.show {
  display: block;
  margin-left: 1px;
  background-color: #fff;
}

.dropdown-item {
  margin-left: 0;
  list-style: none;
}

.navbar-item:hover .dropdown {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navbar">
  <li id="menu1" class="navbar-item">
    <a>Item A</a>
  </li>
  <li class="navbar-item"><a>Item B</a></li>
  <li class="navbar-item"><a>Item C</a></li>
  <li class="navbar-item"><a>Item D</a></li>
  <li class="navbar-item"><a>Item E</a></li>
</ul>

<ul id="submenu1" class="dropdown">
  <li class="dropdown-item">Sub Item A</li>
  <li class="dropdown-item">Sub Item B</li>
  <li class="dropdown-item">Sub Item C</li>
</ul>

关于javascript - 在可滚动容器中定位绝对下拉列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48172042/

容器javascriptgtltclassjqueryhtmlcss

有关javascript - 在可滚动容器中定位绝对下拉列表的更多相关文章

  1. ruby - RVM 使用列表[0] - 2

    是否有类似“RVMuse1”或“RVMuselist[0]”之类的内容而不是键入整个版本号。在任何时候，我们都会看到一个可能包含5个或更多ruby的列表，我们可以轻松地键入一个数字而不是X.X.X。这也有助于rvmgemset。 最佳答案 这在RVM2.0中是可能的=>https://docs.google.com/document/d/1xW9GeEpLOWPcddDg_hOPvK4oeLxJmU3Q5FiCNT7nTAc/edit?usp=sharing-知道链接的任何人都可以发表评论

  2. 「Python｜Selenium｜场景案例」如何定位iframe中的元素？ - 2

    本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决

  3. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. Ruby on Rails regexp equals-tilde 与 array include 用于检查选项列表 - 2

    我正在使用Rails3.2.3和Ruby1.9.3p0。我发现我经常需要确定某个字符串是否出现在选项列表中。看来我可以使用Ruby数组.includemethod:或正则表达式equals-tildematchshorthand用竖线分隔选项:就性能而言，一个比另一个好吗？还有更好的方法吗？ 最佳答案 总结:Array#include?包含String元素，在接受和拒绝输入时均胜出，对于您的示例只有三个可接受的值。对于要检查的更大的集合，看起来Set#include?和String元素可能会获胜。如何测试我们应该根据经验对此进行测试

  5. ruby-on-rails - ActiveAdmin 自定义选择过滤器下拉名称 - 2

    对于用户模型，我有一个过滤器来检查用户的预订状态，该状态由整数值(0、1或2)表示。UserActiveAdmin索引页上的过滤器是通过以下代码实现的:filter:booking_status,as::select然而，这会导致下拉选项为0、1或2。当管理员用户从下拉列表中选择它们时，我更愿意自己将它们命名为“未完成”、“待定”和“已确认”之类的名称。有没有办法在不改变booking_status在模型中的表示方式的情况下做到这一点？ 最佳答案 假设booking_status是模型中的枚举字段，您可以使用:过滤器:booking

  6. Ruby:如何将数组拼接成 Lisp 风格的列表？ - 2

    这是我发现自己偶尔想做的事情。假设我有一个参数列表。在Lisp中，我可以像这样`(imaginary-function,@args)为了调用将数组从一个元素转换为正确数量的参数的函数。Ruby中是否有类似的功能？或者我只是在这里使用了一个完全错误的成语？ 最佳答案 是的!它被称为splat运算符。a=[1,44]p(*a) 关于Ruby:如何将数组拼接成Lisp风格的列表？，我们在StackOverflow上找到一个类似的问题： https://stackov

  7. ruby-on-rails - Ruby on Rails 将列表拆分或切片为列 - 2

    @locations=Location.all#currentlistingall@locations=Location.slice(5)orLocation.split(5)使用Ruby，我试图将我的列表分成4列，每列限制为5个；然而，切片或拆分似乎都不起作用。知道我可能做错了什么吗？任何帮助是极大的赞赏。 最佳答案 您可能想使用in_groups_of:http://railscasts.com/episodes/28-in-groups-of这是RyanBates在railscast中的示例用法:

  8. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  9. Ruby 删除可枚举列表中的重复项 - 2

    ruby中有没有一个很好的方法来删除可枚举列表中的重复项(即拒绝等) 最佳答案 对于数组你可以使用uniq()方法a=["a","a","b","b","c"]a.uniq#=>["a","b","c"]所以如果你只是(1..10).to_a.uniq或%w{antbatcatant}.to_a.uniq因为无论如何，几乎所有您实现的方法都将作为Array类返回。 关于Ruby删除可枚举列表中的重复项，我们在StackOverflow上找到一个类似的问题： h

  10. ruby-on-rails - Scaffold Rails 3 View 中的外键下拉列表 - 2

    我使用脚手架和Rails3创建了2个模型。模型是位置和作业，每个作业都有一个位置。我在脚手架生成代码中创建了所需的引用调用，但是当我查看创建新作业的View时，我看到的只是一个文本框，我应该在其中添加location_id。我怎样才能让它变成下拉菜单以获得更好的用户体验？ 最佳答案 想象一下，您有每个位置的titleAPI:http://apidock.com/rails/ActionView/Helpers/FormOptionsHelper/collection_select 关于r

随机推荐