单击 dt 元素时的粗体文本（并保持这种状态直到再次单击）

Question

这是我今天的问题：

如何使 HTML 中的 dt 标记元素在单击后显示为 bold，并保持粗体直到单击另一个 dt 元素和/还是关闭了下拉 dt 的部分？

我正在使用符合 Bootstrap 2.x/3 的 css 表，并且正在尝试弄清楚如何做到这一点，而无需修改我的硬代码或深入研究 JavaScript（尽管如果这些是唯一可行的选择，我都在听）。

现在我的代码 sn-p 是这样的：

dt, .close { cursor:pointer; color:#093A7F !important; font-weight:normal; }
dt:active, dt:focus { font-weight:bold !important; }

同样，我们的想法是让问题保持粗体，直到相应的答案“部分”关闭。目前，上述代码仅在被主动点击时才会将文本加粗。

感谢任何帮助。

谢谢！ :D

Answer 1

给元素添加tabindex属性：

<dl>
    <dt tabindex="1">title</dt>
    <dd>content</dd>
    <dt tabindex="2">title</dt>
    <dd>content</dd>
</dl>

http://jsfiddle.net/y9h8w/

Answer 2

可能有一个解决方案，您可以使用具有相同 name 属性的 radio 元素来做到这一点。但是样式不是最简单的，我认为最后你将不得不使用 Javascript。