Реализация запасного варианта jQuery для элемента details

Question

Я пытаюсь реализовать запасной вариант jQuery для элемента details.Если вы никогда не слышали об этом, это в основном виджет Раскрытия .Если логический атрибут 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.Что я делаю неправильно?Вот живой пример .

Обновления

• Работает в Firefox 4.
• manjii указал, что open следует изменить на open="open", иначе он не будет работать с первого раза. BoltClock также предоставил альтернативное решение.Однако это не главная проблема.
• marcosfromero и BoltClock подняли вопрос о поддержке динамических стилей Chrome, который, я думаю, может быть связан.

Answer 1

Обнаружена ошибка WebKit здесь .

Ошибка 21346 Селектор значения атрибута не переоценивается при изменении атрибута

Добавление этого пустого правила временно устранит проблему, с которой я столкнулся:

details[open] {}

Вопреки описанию в отчете об ошибках, похоже, что это происходит при использовании селектора атрибута с последующим комбинатором-потомком.

Однако Chrome 12 был выпущен сегодня и имеет встроенную поддержкуэлементы details и summary.

Answer 2

Добавить поддержку 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 3

Это не работает только в первый раз, потому что для:

<details open>

$(this).parent().attr("open") равно "" (пустая строка) = false => атрибут не удален, но с учетомЗначение "open" => при втором щелчке будет работать.

Чтобы исправить это, добавьте значение к атрибуту:

<details open="open">

Answer 4

Я использую это решение , чтобы заставить его работать во всех неподдерживаемых браузерах.Он не требует и не использует 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>

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

По крайней мере, в Chrome проблема не в коде jQuery, а в поддержке Chrome ваших селекторов CSS.

Если вы отлаживаете код jQuery, он работает, но CSS не применяется должным образом.

Проверьте эту ветвь вашего исходного кода с помощью «консоли отладки»:

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