Question

我有一个无序列表中的项目列表。每个<LI>项都有一个相应的描述，需要在选择该元素时显示。我正在考虑将描述放入title属性，然后从on元素点击并在描述容器中呈现它。但是，当鼠标悬停在<li>上时，我真的不希望它显示为工具提示。是否有更好的替代标题？

<li title="description here">My element</li>

Answer 1

将其存储在HTML5 data-* attribute

中

<li data-title="description here">My element</li>

这样做不会将说明显示为工具提示 ..

data-title可以是任何数据 - yourname

可以使用.attr()或.data()

访问此内容

$('li').attr('data-title') ;

OR

$('li').data('title');

Answer 2

您可以将DL列表与包含描述的DD一起使用，并在启用JS时默认隐藏，并在禁用JS时显示。

<dl>
    <dt>My element</dt>
    <dd>Description here</dd>

    <dt>Another element</dt>
    <dd>Another description</dd>
</dl>

Answer 3

您可以根据需要添加任意数量的标记属性。您可以随意定义自己的属性，而不会弄乱预定义的属性。

例如：

<li desc1="description here" desc2="Second desc here">My element</li>

将其作为普通属性访问：

$('li').attr('desc1')

$('li').attr('desc2')

在你的情况下它应该是这样的：

$('li').bind('click', function(event) {
  var desc = $(event.target).attr('desc1');
});

'Standart'属性应该用于它们的主要目的。如果开发人员需要自己的属性，他应该自由定义它们。

还有一件事：您可以将HTML连接到属性中，只是不要忘记转义包装分隔符（“，”）。desc1="<div class='alert'>description here</div>"将正常工作。