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，以便在单击open元素时添加/删除summary属性。

的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

事实证明，这是一个报告here的WebKit错误。

错误21346 属性值选择器没有在属性上重新评估变化

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

details[open] {}

与错误报告中的描述相反，使用属性选择器后跟后代组合子时似乎会发生这种情况。

但是，Chrome 12今天发布，它对details和summary元素提供原生支持。

Answer 2

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

<details open>

$(this).parent().attr("open")等于""（空字符串）= false =＆gt;该属性未被删除，但给定值"open" =＆gt;第二次点击将有效。

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

<details open="open">

Answer 3

添加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 4

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

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

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

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

Answer 5

在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 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>

为details元素实现jQuery回退

6 个答案:

添加Mozilla Firefox支持