CSS 焦点：有没有一种方法可以取消焦点？

Question

我正在尝试在我的CSS中调整焦点，因为我想用下拉列表来实现它。然而，我遇到了一个问题：“取消焦点”：目前，如果您单击div.inside之外的区域，它将取消焦点，这正是我想要的。但是，我还希望当您再次单击li.collapse时，它也会取消焦点，就像li.collapse是一个开/关按钮。

我尝试了以下方法，但没有成功：

div.inside:active + li.collapse:focus { display: none;}

有人知道另一种方法吗？或者没有使用JavaScript甚至是可能的吗？

下面是代码和fiddle链接：

html:

<li class=collapse tabindex="1"><a>&nbsp;Click To See List&nbsp;</a> <div class="inside">
List 1....</div></li>

CSS：

li.collapse > a{background: #cdf; cursor: pointer; display: block;}
li.collapse:focus{ outline: none;}
li.collapse > div.inside{ display: none;}
li.collapse:focus div.inside{display: block; }
div.inside:focus{ display: none;}
div.inside{background: #cdf; }
div.inside:active + li.collapse:focus { display: none;}

https://jsfiddle.net/q2e1vnny/

- Bethfiander

---

我相信你需要使用JS来完成这个。 - The One and Only ChemistryBlob

附注： • collapse周围缺少引号。 • 使用CSS在元素周围添加填充通常被认为比使用&nbsp更可取。 • 除非您需要区分div.collapse和somethingelse.collapse，否则最好（加快浏览器加载时间，并使覆盖样式更容易）只说.collapse（和.inside）。 • 除非您需要区分.collapse > a和.collapse a，否则最好（同样的原因）避免使用>。 • + 选择相邻兄弟。 - henry

focus 的相反词是 blur 链接 - Max

Answer 1

我发现了一个技巧，我认为你可以尝试一下，只需设置：

li.collapse:focus
{ pointer-events: none; }

请确保您的

下有一个可以聚焦的对象。

根据您的情况可能需要进行一些调整。

- aliqandil

Answer 2

您需要使用JavaScript来编程性地聚焦和模糊元素。CSS只允许您为已经发生事件的元素设置样式。

尝试：

document.getElementById('SomeId').focus();
document.getElementById('SomeId').blur();

- Christopher Harris

Answer 3

你将需要使用JavaScript。为了让自己入门，我推荐jQuery（在这个特定的例子中，两者并没有太大区别，但如果你开始阅读其中之一，我认为jQuery是一个更容易入手的地方。预计会有人持不同意见！）。

以下是一个示例，如果我需要支持多个项目，我会这样做。这比你的示例要求更多，而且这可能对你来说过于不同（它完全不依赖于:focus，而且我不知道JavaScript解决方案是否适用于你的项目），但希望这对你思考列表、CSS和JS时有所帮助。

• 在你使用 <div> 的地方，我使用 <li>（"列表项"），在你使用 <li> 的地方，我使用 <ul>（"无序列表"）。
• 嵌套列表有助于保持语义化（"有一个列表，每个列表可以有一个子列表"）
• jQuery脚本说“当单击时，如果没有添加类“open”，则添加类“open”，否则删除类“open”。”
• CSS说“隐藏子列表，但显示紧随具有类“open”的元素的列表”

$('span').click(function() {
  $(this).toggleClass('open')
})

ul > li {
  cursor: pointer;
  background: #cdf;
}
li ul {
  display: none;
}
.open + ul {
  display: block;
}

/* layout styles to match your example */
ul {
  padding: 0;
}
li {
  list-style: inside;
}
li li {
  list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul>
  <li>
    <span>Click 1</span>
    <ul>
      <li>
        <a>a link</a>
      </li>
      <li>
        <a>another link</a>
      </li>
    </ul>
  </li>
  <li>
    <span>Click 2</span>
    <ul>
      <li>
        <a>a link</a>
      </li>
      <li>
        <a>another link</a>
      </li>
      <li>
        <a>yet another link</a>
      </li>
    </ul>
  </li>
</ul>

请参阅https://api.jquery.com/click/了解更多关于jQuery的click()的信息，包括示例。

- henry