0

Есть код

let elemmenuitemli = document.querySelectorAll('.fa');
let sidemenu = document.querySelector('#sidemenu');

elemmenuitemli.addEventListener("onmouseenter", checkitem);
elemmenuitemli.addEventListener("onmouseleave", checkitem);


function checkitem() {
    if sidemenu.classList.contains("active")
    {
        /* Удаление меню ul*/
        sidemenu.innerHTML='
        /* Сворачивание меню ul */
          <li>
    <div class="leftside">
    <i class="fa fa-home"></i>
    </div>
  </li>
  <li>
    <div class="leftside">
    <i class="fa fa-home"></i>
    </div>
  </li>
  <li>
    <div class="leftside">
    <i class="fa fa-home"></i>
    </div>
  </li>
  <li>
    <div class="leftside">
    <i class="fa fa-home"></i>
    </div>
  </li>
  </li>
  ';

    }
    else {
        /* Удаление меню ul*/
        sidemenu.innerHTML="<li>
    <div class="leftside">
    <i class="fa fa-home"></i>
    </div>
    <div class="centerplace">
    <a href="" class="nestedblock">Техника для кухни</a>
    </div>
    <div class="rightside">
    <i class="fa fa-home"></i>
    </div>
  </li>
  <li>
    <div class="leftside">
    <i class="fa fa-home"></i>
    </div>
    <div class="centerplace">
    <a href="" class="nestedblock">Бытовая техника для дома</a>
    </div>
    <div class="rightside">
    <i class="fa fa-home"></i>
    </div>
  </li>
  <li>
    <div class="leftside">
    <i class="fa fa-home"></i>
    </div>
    <div class="centerplace">
    <a href="" class="nestedblock">Ноутбуки и компьютеры</a>
    </div>
    <div class="rightside">
    <i class="fa fa-home"></i>
    </div>    
  </li>
  <li>
    <div class="leftside">
    <i class="fa fa-home"></i>
    </div>
    <div class="centerplace">
    <a href="" class="nestedblock">Комплектующие</a>
    </div>
    <div class="rightside">
    <i class="fa fa-home"></i>
    </div>    
  </li>
  </li>";
        sidemenu.classList.add('active');
        /* Разворачивание меню ul */
    }
}

Каким образом в ветви else значение свойства sidemenu.innerHTML - строку можно записать в одну строку?

6
  • А зачем в одну строку? 1 мар 2021 в 9:33
  • @АлексейШиманский такое ощущение, что при переводе на другую строку закрывающая кавычка не работает.
    – goodsoft
    1 мар 2021 в 9:35
  • После редактирования вопроса я вижу, что у вас проблема в том, что двойные кавычки находятся в двойных кавычках. Либо внутри используйте одинарные (или экранирование - обратный слэш), либо всю конструкцию оберните в одинарные 1 мар 2021 в 9:40
  • А лучше, в таком случае, используйте подход из моего ответа 1 мар 2021 в 9:41
  • ну что, ответ помог? 1 мар 2021 в 14:19

1 ответ 1

3

Я вижу, что у вас проблема в том, что двойные кавычки находятся в двойных кавычках. Либо внутри используйте одинарные (или экранирование: обратный слэш), либо всю конструкцию оберните в одинарные.


Подход, который получше:

Если вам надо вывести форматированный html, а в кавычках это невозможно сделать, то используйте шаблонные строки:

https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Template_literals

https://learn.javascript.ru/es-string

Они позволяют и вставлять переменные внутрь, а также сохраняют форматирование html в таком виде, в котором написаны:

let html = `
<div>
    <ul>
        <li>test1</li>
        <li>test2</li>
        <li>test3</li>
    </ul>
</div>`;

console.log(html);

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.