为 details 元素实现 jQuery 回退

Question

我正在尝试为 details 元素实现 jQuery 后备。如果您从未听说过，它基本上是Disclosure widget。如果布尔属性open 存在，则表示要向用户显示摘要和附加信息。如果该属性不存在，则仅显示摘要。下面的 HTML 和 CSS 实现了这一点。

HTML

<!-- opened -->
<details open>
    <summary>Summary</summary>
    <p>Additional information</p>
</details>

<!-- closed -->
<details>
    <summary>Summary</summary>
    <p>Additional information</p>
</details>

CSS

details summary ~ * {
    display: none;
}

details[open] summary ~ * {
    display: block;
}

然后我添加了以下 jQuery 以在单击 summary 元素时添加/删除 open 属性。

jQuery

$("summary").click(function() {
    if ($(this).parent().attr("open")) {
        $(this).parent().removeAttr("open");
    } else {
        $(this).parent().attr("open", "open");
    }
});

它添加和删除open 属性，但p 元素的可见性在Chrome 中不受影响。我究竟做错了什么？这是live example。

更新

• 它适用于 Firefox 4。
• manjii 指出open 应该改成open="open" 不然第一次就不行了。 BoltClock 也提供了替代解决方案。不过，这不是主要问题。
• marcosfromero 和 BoltClock 提出了 Chrome 的动态样式支持问题，我认为这可能是相关的。

Answer 1

它不是第一次工作，因为：

<details open>

$(this).parent().attr("open") 等于 "" (空字符串) = false => 属性没有被删除，但给定值"open" => 第二次点击将起作用。

要解决此问题，请为属性添加一个值：

<details open="open">

Answer 2

至少在 Chrome 中，问题不在于 jQuery 代码，而在于 Chrome 对 CSS 选择器的支持。

如果您调试 jQuery 代码，它可以工作，但 CSS 没有按预期应用。

使用“调试控制台”检查您的原始代码的这个分支：

http://jsfiddle.net/marcosfromero/KQGn8/

Answer 3

原来是here 报告的 WebKit 错误。

错误 21346 属性值选择器 没有根据属性重新评估 改变

添加此空规则将暂时解决我遇到的问题：

details[open] {}

与错误报告中的描述相反，它似乎在使用属性选择器后跟后代组合器时发生。

不过，Chrome 12 今天发布了，它原生支持 details 和 summary 元素。

Answer 4

在 Safari 中，您需要将 evt.preventDefault() 添加到点击处理程序，否则它也会触发本机行为，将其返回到点击前的状态（这在 Chrome 中似乎不会发生，奇怪）。

$("summary").click(function(evt) {
    if ($(this).parent().attr("open")) {
        $(this).parent().removeAttr("open");
    } else {
        $(this).parent().attr("open", "open");
    }
    evt.preventDefault();
});

Answer 5

添加 Mozilla Firefox 支持

<details>
<summary>Summary</summary>
<p id="detail">Additional information</p>
</details>


<script>
var ischrome = false;
if(/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())){
    ischrome = true;
    }

$detail = $('#detail');
$detail.hide();
if(!ischrome){
    $('summary').prepend('► ');                     
}
$('summary').on('click', function(e){
    if ($detail.is(":visible")){
        $('summary').html('► summary');
        $detail.hide();                                 
    }else{              
        $('summary').html('▼ summary');             
        $detail.show(); 
    }
});                     
</script>

Answer 6

我使用this solution 让它在所有不受支持的浏览器上工作。它不需要也不使用 jQuery，但如果你愿意，你可以用 jQuery 来增强它（它只是普通的 JS）。

下面是实际的解决方案：

details summary {display: block;}    
details summary ~ * {
    display: none;
}
details[open] summary ~ * {
    display: block;
}

<details>
  <summary onclick="if(this.parentElement.getAttribute('open')!='open') this.parentElement.setAttribute('open','open'); else this.parentElement.removeAttribute ('open'); return false;">{{ item.title }}</summary>
  {{ item.content }}
</details>