CSS 焦点：有没有办法分散焦点？答案

【问题标题】：CSS focus: Is there a way to unfocus?CSS 焦点：有没有办法分散焦点？
【发布时间】：2017-01-22 18:12:42
【问题描述】：

我正在关注我的 css，因为我正在考虑用这个做一个下拉列表。但是，我遇到了“不聚焦”的问题：目前，如果您在 div.inside 之外单击，它将不聚焦，这正是我想要的。不过，我也想让它在你再次点击 li.collapse 时让它失去焦点，这样 li.collapse 就像一个开/关按钮。

我试过这个没有运气：

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

有没有人知道解决这个问题的另一种方法，或者甚至没有 JavaScript 也有可能？

这是代码和小提琴：

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/

【问题讨论】：

我相信你需要 JS 来做这个
相关注释： • 缺少collapse 周围的引号。 • 使用css 在元素周围添加填充通常被认为比使用&nbsps 更可取。 • 除非您需要区分div.collapse 和somethingelse.collapse，否则最好只说.collapse（和.inside）（加快浏览器加载时间，并更容易覆盖样式）。 • 除非您需要区分.collapse > a 和.collapse a，否则最好避免>（同样的原因）。 • +selects adjacent siblings
focus 的反义词是 blur Link

标签： html css focus

【解决方案1】：

我刚刚发现了一个技巧，我认为你可以做到，只需设置：

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

并确保您的li 下有一个可以聚焦的对象。

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

【讨论】：

【解决方案2】：

您必须使用 javascript。为了弄湿你的脚趾，我推荐 jQuery（在这个特定的例子中，它并没有太大的区别，但是如果你开始阅读其中一个或另一个，我认为 jQuery 将是一个更容易开始的地方。提示不同意者！）。

下面是一个示例，说明如果我需要支持多个项目，我将如何做到这一点。这比您的示例要求的要多，而且这可能对您来说太不同了（它根本不依赖:focus，而且我不知道您的项目是否可以接受 javascript 解决方案），但希望它'将有助于您思考列表以及 css 和 js。

你使用<div>的地方我使用<li>（“列表项”），你使用<li>的地方我使用<ul>（“无序列表”）。
嵌套列表有助于保持语义（“有一个列表，每个列表都可以有一个子列表”）
jQuery 脚本说“当单击 <span> 时，添加类“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>

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

【讨论】：

【解决方案3】：

您将需要使用 JavaScript 以编程方式聚焦和模糊元素。 CSS 将只允许您对已发生事件的元素进行样式设置。

试试：

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

【讨论】：