Материализация разборного кузова смена после открытия - PullRequest
Новая
       58

Материализация разборного кузова смена после открытия

0 голосов
/ 27 января 2020

Я хочу изменить заполнение складного тела на 3px. Сначала это работает, но если вы откроете, закроете, а затем снова откроете, складной отступ будет сброшен к значению по умолчанию и больше не будет 3px.

Можете ли вы сказать мне, как это предотвратить?

Вот кодекс, показывающий проблему: https://codepen.io/jbeausej/pen/yLyrOow

Спасибо!

Вот мой код: 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <title>Document</title>
</head>
<body>    
    <div class="container">
        <div class="row">
            <div class="col s6 m6 l6 x6" >
                <div class="col-content card-panel z-depth-2 round-small" style="padding-top: 15px;">
                    <ul class="collapsible">
                        <li>
                          <div class="collapsible-header" style="padding:4px 4px 4px 8px;">Collapsible title</div>
                          <div class="collapsible-body" style="padding:3px;"><span>Collapsible body content.</span></div>
                        </li>               
                    </ul>                    
                </div>                
            </div>
        </div>
    </div>
</body>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.collapsible');
    var instances = M.Collapsible.init(elems);
  });
</script>

</html>

1 Ответ

1 голос
/ 27 января 2020

Вместо встроенного стиля создайте правило CSS: 

.collapsible .collapsible-body{
  padding:3px;
}

Демонстрация: https://codepen.io/lotusgodkk/pen/JjoVXLX

Встроенный стиль удаляется, когда контейнер анимированные для открытия или закрытия.

...