Question

我在我的CSS中玩焦点，因为我正在考虑用这个做下拉列表。然而，我对＃34; unfocus＆＃34;有一个问题：如果你点击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/

Answer 1

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

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

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

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

Answer 2

您需要使用JavaScript以编程方式对焦和模糊元素。 CSS只允许您设置在其上发生事件的元素的样式。

尝试：

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

Answer 3

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

如果我需要支持多个项目，这是一个如何执行此操作的示例。这比你的例子要求的要多，而且你可能使用它太不同了（它完全不依赖于:focus，我不知道你的项目是否可以使用javascript解决方案），但是希望它对你对list和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/，包括示例。

CSS焦点：有没有办法解决焦点？

3 个答案: