jQuery 'prop' 在 FireFox 中无法在详细信息的 'open' 属性上工作

Question

我想修复Firefox中detail-html-element的行为。

所以我自己切换open属性，如下所示：

$('summary').on('click', function () {
    var details = $(this).parent();  
    $('details').prop('open', !details.attr('open'));
});

演示

我使用prop是因为open是一个属性而不是一个属性，对吧？！

无论如何，这在 Firefox 中不起作用，但是如果我将prop更改为attr它就可以工作

$('details').attr('open', !details.attr('open'));  

有人可以向我解释我哪里出错了吗？ 哗啦啦！

Answer 1

您正在使用的 css 标识一个属性。这就是为什么更改属性会更改 css 而设置属性不会。

我使用 prop 是因为 open 是一个属性而不是一个属性，对吧？！

嗯，它可以是其中之一，这取决于你如何定义它。css 再次引用属性。

有几个很长的答案解释了差异以及每个答案的使用位置。

简而言之

属性是 HTML 元素上的设置，它将某些数据或行为归因于元素。它主要与加载有关，帮助我们正确呈现 HTML，听到这可能是让您使用 prop 的原因。

属性是 DOM 节点的一个特征，告诉我们它是当前的 foo 状态。有附加到特定节点类型的特定属性，有些是标准属性，有些是浏览器设计属性。由于它是DOM的一部分，因此该属性与DOM操作(又名Javascript(一起留在我们身边。