jquery - 悬停时展开子(在小父元素中)元素(取决于元素数量)

Question

我有一个表格，其中有一些小元素(大约 20 像素)和数字(使用了多少次)。悬停时会显示子元素(绝对位置)，其中包含使用它的地方。所以有链接，它甚至可能有几百像素的宽度。 HTML 看起来像这样:

.el-used {
  position: relative;
  margin-left: 4px;
  padding: 1px 6px;
  text-decoration: none;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #d7d6d5;
  font-size: 0.938em;
}

.el-used:hover {
  background: #ff6840;
  color: #fff;
}

.el-used .list {
  position: absolute;
  top: 0;
  left: 0.9em;
  display: none;
  width: 20em;
  padding: 15px;
  z-index: 10;
  border: inherit;
  border-radius: 3px;
  color: #666;
  background: #fff;
}

.el-used:hover .list {
  display: inline-block;
}

.el-used .list a {
  margin-right: 15px;
  white-space: nowrap;
}

<div><span class="el-used">1<span class="list">Wszystkie</span></span>
</div>
<div><span class="el-used">1<span class="list"><a href="/1">O firmie</a></span></span>
</div>
<div><span class="el-used">6<span class="list"><a href="/">O firmie</a> <a href="/4">Oferta</a> <a href="/5">Podstrona 1</a> <a href="/6">Podstrona 2</a> <a href="/8">Podstrona 4</a> <a href="/2">Mapa strony</a></span></span>
</div>

问题是如果我不希望每个链接元素都在单独的行中，我必须设置 width:20em;。因为我假设 .list 元素试图适应父元素(.el-used)所以它的宽度很小并且文本被换行。 我只想设置(而不是那个宽度)例如max-width:20em，如果只有一个元素，它会缩小，当有更多元素时，它会增长(到这 20em)。

一些我如何解决的建议？

Answer 1

请注意，我对您的 HTML 进行了大量重构:

• 是列表的东西应该这样标记，因此 <ul>
• 嵌套元素时要小心:a div should not reside within a span
• 注意元素的默认值 display -属性:span是 inline ，而 div是 block ;理解这一点将使您能够充分利用 CSS 的强大功能:内联跟随文本流，而 block 导致中断并且可以有填充/边距

编辑

既然你提到你希望你的标记驻留在表格中，我编辑了我的原始答案以解决这个问题。基本上，将列表项设置为 white-space: nowrap;防止他们在内部换行。

我还添加了一个类 .wide它手动指定具有多个元素的框应该有多宽。您必须手动设置此宽度；至少我想不出没有固定宽度的解决方案。下面是两个例子:(6)有.wide列表项展开，(12)没有 .wide因此它们在彼此下方点亮。

td {
  border: 1px solid black;
}

.wrapper {
  position: relative;
}

.el-used {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  text-decoration: none;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #d7d6d5;
  font-size: 0.938em;
}

.el-used:hover {
  background: #ff6840;
  color: #fff;
}

.el-used .list {
  position: absolute;
  top: 0;
  left: 0.9em;
  display: none;
  padding: 15px;
  border: inherit;
  max-width: 20em;
  border-radius: 3px;
  color: #666;
  background: #fff;
  z-index: 10;
  list-style-type: none;
}

.el-used .list.wide {
  width: 15em;
}

.el-used:hover .list {
  display: block;
}

.el-used .list li {
  display: inline-block;
  white-space: nowrap;
}

<table>
  <tbody>
    <tr>
      <td>First</td>
      <td>Second
        <div class="wrapper">
          <div class="el-used">1
            <ul class="list">
              <li>Wszystkie</li>
            </ul>
          </div>
        </div>
      </td>
      <td>Third</td>
      <td>Fourth</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second
        <div class="wrapper">
          <div class="el-used">1
            <ul class="list">
              <li><a href="/1">O firmie</a></li>
            </ul>
          </div>
        </div>
      </td>
      <td>Third</td>
      <td>Fourth</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second
        <div class="wrapper">
          <div class="el-used">
            6
            <ul class="list wide">
              <li><a href="/">O firmie</a></li>
              <li><a href="/4">Oferta</a></li>
              <li><a href="/5">Podstrona 1</a></li>
              <li><a href="/6">Podstrona 2</a></li>
              <li><a href="/8">Podstrona 4</a></li>
              <li><a href="/2">Mapa strony</a></li>
            </ul>
          </div>
        </div>
      </td>
      <td>Third</td>
      <td>Fourth</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second
        <div class="wrapper">
          <div class="el-used">
            12
            <ul class="list">
              <li><a href="/">O firmie</a></li>
              <li><a href="/4">Oferta</a></li>
              <li><a href="/5">Podstrona 1</a></li>
              <li><a href="/6">Podstrona 2</a></li>
              <li><a href="/8">Podstrona 4</a></li>
              <li><a href="/2">Mapa strony</a></li>
              <li><a href="/">O firmie</a></li>
              <li><a href="/4">Oferta</a></li>
              <li><a href="/5">Podstrona 1</a></li>
              <li><a href="/6">Podstrona 2</a></li>
              <li><a href="/8">Podstrona 4</a></li>
              <li><a href="/2">Mapa strony</a></li>
            </ul>
          </div>
        </div>
      </td>
      <td>Third</td>
      <td>Fourth</td>
    </tr>
  </tbody>
</table>