Складной заголовок с флажком в MaterializeCSS - PullRequest
Новая
       7

Складной заголовок с флажком в MaterializeCSS

0 голосов
/ 22 сентября 2019

Мне нужно сделать разборный флажок с помощью заголовка (в MaterializeCSS)

Мне нужно, чтобы каждый раз, когда я нажимал на флажок, как отмеченный, соответствующий складной раздел будет расширяться (следовательно, если этот флажок не установлен, разделрухнет)

или вы можете думать об этом как:

Каждый раз, когда я раскрываю коллапсируемый заголовок, флажок будет установлен и раздел будет расширяться (и когда я сверну заголовок,флажок будет снят, а раздел будет свернут)

Я очень плохо знаком с Javascript и Materialize, и я почти уверен, что есть лучшая реализация, поскольку моя реализация создает проблему:

Моя реализацияне обновляет флажок, когда я щелкаю за пределами метки флажка, но все еще в пределах границ div-заголовка.Вместо этого он просто разрушается / расширяется.Вполне понятно, почему это удачно, но я не могу придумать способ обойти и надеяться получить здесь некоторые идеи.

Для моего пробного кода, приведенного ниже, я заставляю его работать только в первом разделе:

Мой HTML-код: 

<ul class="collapsible">
    <li>
      <div class="collapsible-header">
      <input id = "isChecked" type = "checkbox" checked = "checked" />
      First
      </div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header">Second</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header">Third</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>

Следовательно, мой код JavaScript: 

 if (document.getElementById('isChecked').checked)
    {
        $(".one").addClass("active");
    }
    else
    {
        $(".one").removeClass("active");
    }

1 Ответ

0 голосов
/ 23 сентября 2019

Я сделал переключатели, чтобы мы могли выбрать один из нескольких вариантов.С помощью let eles = document.querySelectorAll("input[type='radio']"); вы можете получить все поля ввода радиосигнала.

Прикрепленное событие click ко всем этим переключателям 

for (let i = 0; i < eles.length; i++) {
  eles[i].addEventListener('click', openColl);
}

Затем проверьте, установлен ли переключатель, затеммы можем открыть этот складной 

openColl = () => {
  for (let i = 0; i < eles.length; i++) {
    if (eles[i].checked) {
      console.log(eles[i].value);
      inst.open(eles[i].value);
    }
  }
};

Чтобы открыть конкретный складной участок, мы используем instance.open(1);.Вы можете найти это в документации по материализации.

HTML 

<p>
  <label>
    <input type="radio" name="group-1" value="0" />
    <span>First</span>
  </label>
</p>
<p>
  <label>
    <input type="radio" name="group-1" value="1" />
    <span>Second</span>
  </label>
</p>
<p>
  <label>
    <input type="radio" name="group-1" value="2" />
    <span>Third</span>
  </label>
</p>

<ul class="collapsible">
  <li>
    <div class="collapsible-header">
      <i class="material-icons">filter_drama</i>First
    </div>
    <div class="collapsible-body">
      <span>Lorem ipsum dolor sit amet.</span>
    </div>
  </li>
  <li>
    <div class="collapsible-header">
      <i class="material-icons">place</i>Second
    </div>
    <div class="collapsible-body">
      <span>Lorem ipsum dolor sit amet.</span>
    </div>
  </li>
  <li>
    <div class="collapsible-header">
      <i class="material-icons">whatshot</i>Third
    </div>
    <div class="collapsible-body">
      <span>Lorem ipsum dolor sit amet.</span>
    </div>
  </li>
</ul>

JS 

document.addEventListener('DOMContentLoaded', function() {
    let coll = document.querySelector('.collapsible');
    M.Collapsible.init(coll);
    let inst = M.Collapsible.getInstance(coll);
    let eles = document.querySelectorAll("input[type='radio']");
    openColl = () => {
      for (let i = 0; i < eles.length; i++) {
        if (eles[i].checked) {
          console.log(eles[i].value);
          inst.open(eles[i].value);
        }
      }
    };
    for (let i = 0; i < eles.length; i++) {
      eles[i].addEventListener('click', openColl);
    }
})
...