Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.06.2018, 15:28
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

Details Summary button:active
Добрый день!
Подскажите, как настроить скрипт, чтобы помимо функции скрытия деталей, стрелка на кнопке меняла наклон? Аналогично работе summary. Через css не получается. Может быть лучше реализовать саму через ::before ::after?

<style>
summary {
  color: #3b393d;
}

.dclose {
  background-color: transparent;
  background-clip: padding-box;
  border: none;
  color: #333;
  line-height: 1.5;
  margin-top: .2em;
  margin-bottom: .2em;
  padding: .375rem .75rem;
}
</style>

<details id="details">
  <summary> open details</summary>
  Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
  Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах
  и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
</details>

<button class="text-right dclose" onclick="closeDetails()"><span class="en" lang="en">▲ Close details</span></button>
<script>
  function closeDetails() {
    document.getElementById("details").open = false;
  }

</script>
Ответить с цитированием
  #2 (permalink)  
Старый 05.06.2018, 16:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от madeas
Через css не получается
<style>
summary {
  color: #3b393d;
}

.dclose {
  background-color: transparent;
  background-clip: padding-box;
  border: none;
  color: #333;
  line-height: 1.5;
  margin-top: .2em;
  margin-bottom: .2em;
  padding: .375rem .75rem;
  position: relative;
}

.dclose:before{
      content: "▲";
      display: block;
      position: absolute;
      left: 0px;
      top: 5px;
      transition: .8s;
}
[open] + .dclose:before{
    transform: rotate(90deg);
}
</style>

<details id="details">
  <summary> open details</summary>
  Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
  Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах
  и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
</details>

<button class="text-right dclose" onclick="closeDetails()"><span class="en" lang="en"> Close details</span></button>
<script>
  function closeDetails() {
    document.getElementById("details").open = false;
  }

</script>
Ответить с цитированием
  #3 (permalink)  
Старый 05.06.2018, 16:18
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

рони,
как всегда, спасибо. Я в принципе так и подумал, что лучше через псевдо.
Ответить с цитированием
  #4 (permalink)  
Старый 05.06.2018, 21:39
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

рони,
подскажите, а можно через js сделать, чтобы при разрешении меньше 991px детали были сложены? Даже если по умолчанию стоит <details open>

Последний раз редактировалось madeas, 05.06.2018 в 21:46.
Ответить с цитированием
  #5 (permalink)  
Старый 05.06.2018, 23:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

madeas,
function closeDetails() {
    document.getElementById("details").open = false;
  }

function closeResize() {
    document.documentElement.scrollWidth < 991 && closeDetails()

}

window.addEventListener('load', closeResize);
window.addEventListener('resize', closeResize);
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
DataTables jQuery, Row details AlexOk jQuery 1 05.07.2017 13:52
Можно ли сделать details в javascript Slejv Элементы интерфейса 2 19.10.2015 00:44
django restful api angular skripka696 Angular.js 0 17.07.2015 09:33
China screen summary Vantedur Оффтопик 1 25.03.2012 13:33
Grid и Summary cmygeHm ExtJS 0 11.11.2010 11:07