Блог

Главная - Вопросы по программированию - Складной элемент из Materialize CSS не расширяется в приложениях Скрипт боковая панель HTML

Складной элемент из Materialize CSS не расширяется в приложениях Скрипт боковая панель HTML

#javascript #html #css #google-apps-script

Вопрос:

Я работаю с большим количеством информации, которая отображается на боковой панели, но у меня возникли проблемы с расширением аккордеона. Элементы взяты из MaterializeCSS.com

Я использую следующее для вызова open html:

 function sideBar2(){
  var sideHtml = HtmlService.createTemplateFromFile('detailed-calculations').evaluate();
  SpreadsheetApp.getUi().showSidebar(sideHtml);
}

И это html-файл, который я использую:

 <html>
  <head>
    <base target="_top">
    <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
      function formSubmit(user_input){
        google.script.run.detailedCalc(user_input);
      }
      document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.collapsible');
        var instances = M.Collapsible.init(elems, options);
      });
      function clps(){
        $('.collapsible').collapsible();
      }
      </script>
  </head>
  <body>
    <ul class="collapsible">
    <li>
      <div class="collapsible-header"><i class="material-icons">accessibility</i>Person</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">directions_boat</i>Boat</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">child_care</i>Baby</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">attach_money</i>Money</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    </ul>
    <script type="text/javascript" src="js/materialize.min.js"></script>
  </body>
</html>

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

Любая помощь будет признательна!!

Ответ №1:

Два элемента — Ссылка на источник вашего файла materialize js внизу показывает:

 <script type="text/javascript" src="js/materialize.min.js"></script>

Вы храните его в своем проекте или ссылаетесь на него где-то локально? Если нет, переключите эту строку на то, что рекомендуется на веб-сайте materializecss:

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

Второй —

«экземпляры var = M. Складной.init(элементы, опции)»

Параметры должны быть параметром. Если вы не передаете параметры, то вы можете просто использовать пустые фигурные скобки, как это:

 var instances = M.Collapsible.init(elems, {});

Просто для ясности, вот HTML-шаблон (с удаленными элементами, которые не имеют отношения к делу):

 <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.collapsible');
        var instances = M.Collapsible.init(elems, {});
      });
      </script>
  </head>
  <body>
    <ul class="collapsible">
    <li>
      <div class="collapsible-header"><i class="material-icons">accessibility</i>Person</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">directions_boat</i>Boat</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">child_care</i>Baby</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">attach_money</i>Money</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    </ul>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>  
    </body>
</html>

Ответ №2:

Добавляю к ответу Лауры Дай.

Похоже, вы пытаетесь использовать jquery , но я не видел jquery, упомянутый выше. Если вы хотите использовать jquery , обязательно ознакомьтесь с ним перед использованием. Смотрите код ниже для рабочего подхода jquery.

 <html>
  <head>
    <base target="_top">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    <script>
      $(document).ready(function() {
        $('.collapsible').collapsible();
      })
    </script>
  </head>
  <body>
    <ul class="collapsible">
      <li>
        <div class="collapsible-header"><i class="material-icons">accessibility</i>Person</div>
        <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
      </li>
      <li>
        <div class="collapsible-header"><i class="material-icons">directions_boat</i>Boat</div>
        <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
      </li>
      <li>
        <div class="collapsible-header"><i class="material-icons">child_care</i>Baby</div>
        <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
      </li>
      <li>
        <div class="collapsible-header"><i class="material-icons">attach_money</i>Money</div>
        <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
      </li>
    </ul>
  </body>
</html>

Примечания:

  • Обязательно проверьте консоль на наличие ошибок при попытке выполнить ваш html. При попытке отладки вашего кода было обнаружено много ошибок. Хотя Лаура Дай уже указывала на это, вы можете уменьшить количество этих ошибок, проверив консоль.
  • Uncaught ReferenceError: $ is not defined это подсказка, указывающая на то, что вы не ссылались на jquery.

Пример консоли, показывающей проблему с jquery:

выход

Метки: