1

Натолкнулся на проблему смены картинки при раскрытии/закрытии списка. Данные для списка берем из константы, далее скриптом составляем сам список. Вроде все хорошо, однако при раскрытии одного из пунктов картинка + меняется на минус везде. побывал сделать через псевдоклассы, безрезультатно

window.onload = function() {
  addItems(docs, document.getElementById("derevo"));
}

function addItems(items, parent) {
  if (!items)
    return;
  items.forEach(function(item, i, arr) {
    var d = document.createElement("div");
    d.innerHTML = '<div class="TreeNodeText">' + item.title + '</div>' +
      ((item.children && item.children.length) ? '<details><summary></summary><div class="paragraph"><div></details>' : '');
    parent.appendChild(d);
    addItems(item.children, d.querySelector(".paragraph"));

  })
}

const docs = [{
  title: '01-05 I. Живые животные; продукты животного происхождения (Группы 01-05)',
  children: [{
      title: '01 Живые животные',
      children: [{
          title: '0101 ... Лошади, ослы, мулы и лошаки живые',
          children: [{
              title: '0101 2 ... лошади '
            },
            {
              title: '0101 21 000 0 чистопородные племенные животные  '
            },
            {
              title: '0101 29 ... прочие  '
            },
            {
              title: '0101 30 000 0 ослы  '
            },
            {
              title: '0101 90 000 0 прочие  '
            }
          ]
        },

        {
          title: '0105 ... Домашняя птица живая, то есть куры домашние (Gallus domesticus), утки, гуси, индейки и цесарки',
          children: [{
              title: '0105 1 ... массой не более 185 г  '
            },
            {
              title: '0105 9 ... прочие '
            }
          ]
        },
        {
          title: '0106 ... Живые животные прочие',
          children: [{
              title: '0106 1 ... млекопитающие  '
            },
            {
              title: '0106 2 ... рептилии (включая змей и черепах)  '
            },
            {
              title: '0106 3 ... птицы  '
            },
            {
              title: '0106 4 ... насекомые  '
            },
            {
              title: '0106 9 ... прочие '
            }
          ]
        }
      ]
    },
    {
      title: '02 Мясо и пищевые мясные субпродукты',
      children: [{
          title: '0201 ... Мясо крупного рогатого скота, свежее или охлажденное',
          children: [{
              title: '0201 1 ... туши и полутуши  '
            },
            {
              title: '0201 2 ... прочие отруба, необваленные  '
            },
            {
              title: '0201 3 ... мясо обваленное  '
            }
          ]
        },

      ]
    },
    {
      title: '03 Рыба и ракообразные, моллюски и прочие водные беспозвоночные  ',
      children: [{
          title: '0301 ... Живая рыба',
          children: [{
              title: '0301 1 ... декоративная рыба  '
            },
            {
              title: '0301 9 ... живая рыба прочая  '
            }
          ]
        },

      ]
    },
    {
      title: '04 Молочная продукция; яйца птиц; мед натуральный; пищевые продукты животного происхождения, в другом месте не поименованные или не включенные   ',
      children: [{
          title: '0401 ... Молоко и сливки, несгущенные и без добавления сахара или других подслащивающих веществ',
          children: [{
              title: '0401 1 ... с содержанием жира не более 1 мас.%  '
            },
            {
              title: '0401 2 ... с содержанием жира более 1 мас.%, но не более 6 мас.%  '
            },
            {
              title: '0401 4 ... с содержанием жира более 6 мас.%, но не более 10 мас.% '
            },
            {
              title: '0401 5 ... с содержанием жира более 10 мас.%  '
            }
          ]
        },

      ]
    },
    {
      title: '05 Продукты животного происхождения, в другом месте не поименованные или не включенные   ',
      children: [{
          title: '0501 00 000 0 Человеческий волос, необработанный, мытый или немытый, очищенный или неочищенный; отходы человеческого волоса'
        },
        {
          title: '0502 ... Щетина свиная или кабанья; барсучий или прочий волос, используемый для производства щеточных изделий; их отходы',
          children: [{
              title: '0502 10 000 0 щетина свиная или кабанья и ее отходы '
            },
            {
              title: '0502 90 000 0 прочие  '
            }
          ]
        },
        {
          title: '0504 00 000 0 Кишки, пузыри и желудки животных (кроме рыбьих), целые и в кусках, свежие, охлажденные, замороженные, соленые, в рассоле, сушеные или копченые'
        },
        {
          title: '0505 ... Шкурки и прочие части птиц с перьями или пухом, перья и части перьев (с подрезанными или неподрезанными краями) и пух, очищенные, дезинфицированные или обработанные для хранения, но не подвергнутые дальнейшей обработке; порошок и отходы перьев или их частей',
          children: [{
              title: '0505 1 ... перья птиц, используемые для набивки; пух  '
            },
            {
              title: '0505 90 000 0 прочие  '
            }
          ]
        },
        {
          title: '0506 ... Кости и роговой стержень, необработанные, обезжиренные, подвергнутые первичной обработке (без придания формы), обработанные кислотой или дежелатинизированные; порошок и отходы этих продуктов',
          children: [{
              title: '0506 10 000 0 оссеин и кости, обработанные кислотой '
            },
            {
              title: '0506 90 000 0 прочие  '
            }
          ]
        },
        {
          title: '0507 ... Слоновая кость, панцири черепах, ус китовый и щетина из китового уса, рога, оленьи рога, копыта, ногти, когти и клювы, необработанные или подвергнутые первичной обработке, но без придания формы; порошок и отходы этих продуктов',
          children: [{
              title: '0507 10 000 0 слоновая кость; порошок и отходы  '
            },
            {
              title: '0507 90 000 0 прочие  '
            }
          ]
        },
        {
          title: '0508 00 000 0 Кораллы и аналогичные материалы, необработанные или подвергнутые первичной обработке; раковины и панцири моллюсков, ракообразных или иглокожих и скелетные пластины каракатиц, необработанные или подвергнутые первичной обработке, без придания формы, порошок и отходы этих продуктов'
        },
        {
          title: '0510 00 000 0 Амбра серая, струя бобровая, циветта и мускус; шпанки; желчь, в том числе сухая; железы и прочие продукты животного происхождения, используемые в производстве фармацевтических продуктов, свежие, охлажденные, мороженые или обработанные иным способом для кратковременного хранения'
        },
        {
          title: '0511 ... Продукты животного происхождения, в другом месте не поименованные или не включенные; павшие животные группы 01 или 03, непригодные для употребления в пищу',
          children: [{
              title: '0511 10 000 0 сперма бычья  '
            },
            {
              title: '0511 9 ... прочие '
            }
          ]
        }
      ]
    }
  ]
}, ]
.paragraph {
  padding-left: 10px;
}

.treeHTML details {
  display: block;
}

.treeHTML div {
  position: relative;
  margin: 0 0 0 .5em;
  padding: 0 0 0 1.2em;
}

.treeHTML div:not(:last-child) {
  border-left: 1px solid #ccc;
}

.treeHTML div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.1em;
  height: .5em;
  border-bottom: 1px solid #ccc;
}

.treeHTML div:last-child:before {
  border-left: 1px solid #ccc;
}

.treeHTML summary {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  content: url("https://samizdatt.net/templates/BlueSkin/dleimages/plus_fav.gif");
}

.treeHTML details[open] summary {
  outline: none;
}

details summary::-webkit-details-marker {
  display: none;
}

.TreeNodeText {
  position: relative;
  height: 100%;
  border: 1px solid #bbb;
  border-left: none;
  box-shadow: 0 2px 2px -2px;
  padding: 0 5px 0 10px;
  border-radius: 2px;
  min-width: 230px;
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  font-weight: 700;
  border-left: 1px solid #bbb;
  padding-bottom: 5px;
  padding-top: 5px;
  margin-bottom: 10px;
}

details summary:before {
  content: url("https://samizdatt.net/templates/BlueSkin/dleimages/plus_fav.gif");
  position: absolute;
  top: 10px;
  left: -8px;
}

details[open] summary:before {
  content: url("http://cdn1.iconfinder.com/data/icons/splashyIcons/remove_minus_sign_small.png");
  position: absolute;
  top: 10px;
  left: -8px;
}
<div class="treeHTML" id="derevo"></div>

UPD

Может кто знает как убрать это безобразие и лишними черточками внутри блоков ?

1 ответ 1

1

Изменение в этом месте details[open] > summary:before. Добавил >. Подробнее.

window.onload = function() {
  addItems(docs, document.getElementById("derevo"));
}

function addItems(items, parent) {
  if (!items)
    return;
  items.forEach(function(item, i, arr) {
    var d = document.createElement("div");
    d.innerHTML = '<div class="TreeNodeText">' + item.title + '</div>' +
      ((item.children && item.children.length) ? '<details><summary></summary><div class="paragraph"><div></details>' : '');
    parent.appendChild(d);
    addItems(item.children, d.querySelector(".paragraph"));

  })
}

const docs = [{
  title: '01-05 I. Живые животные; продукты животного происхождения (Группы 01-05)',
  children: [{
      title: '01 Живые животные',
      children: [{
          title: '0101 ... Лошади, ослы, мулы и лошаки живые',
          children: [{
              title: '0101 2 ... лошади '
            },
            {
              title: '0101 21 000 0 чистопородные племенные животные  '
            },
            {
              title: '0101 29 ... прочие  '
            },
            {
              title: '0101 30 000 0 ослы  '
            },
            {
              title: '0101 90 000 0 прочие  '
            }
          ]
        },

        {
          title: '0105 ... Домашняя птица живая, то есть куры домашние (Gallus domesticus), утки, гуси, индейки и цесарки',
          children: [{
              title: '0105 1 ... массой не более 185 г  '
            },
            {
              title: '0105 9 ... прочие '
            }
          ]
        },
        {
          title: '0106 ... Живые животные прочие',
          children: [{
              title: '0106 1 ... млекопитающие  '
            },
            {
              title: '0106 2 ... рептилии (включая змей и черепах)  '
            },
            {
              title: '0106 3 ... птицы  '
            },
            {
              title: '0106 4 ... насекомые  '
            },
            {
              title: '0106 9 ... прочие '
            }
          ]
        }
      ]
    },
    {
      title: '02 Мясо и пищевые мясные субпродукты',
      children: [{
          title: '0201 ... Мясо крупного рогатого скота, свежее или охлажденное',
          children: [{
              title: '0201 1 ... туши и полутуши  '
            },
            {
              title: '0201 2 ... прочие отруба, необваленные  '
            },
            {
              title: '0201 3 ... мясо обваленное  '
            }
          ]
        },

      ]
    },
    {
      title: '03 Рыба и ракообразные, моллюски и прочие водные беспозвоночные  ',
      children: [{
          title: '0301 ... Живая рыба',
          children: [{
              title: '0301 1 ... декоративная рыба  '
            },
            {
              title: '0301 9 ... живая рыба прочая  '
            }
          ]
        },

      ]
    },
    {
      title: '04 Молочная продукция; яйца птиц; мед натуральный; пищевые продукты животного происхождения, в другом месте не поименованные или не включенные   ',
      children: [{
          title: '0401 ... Молоко и сливки, несгущенные и без добавления сахара или других подслащивающих веществ',
          children: [{
              title: '0401 1 ... с содержанием жира не более 1 мас.%  '
            },
            {
              title: '0401 2 ... с содержанием жира более 1 мас.%, но не более 6 мас.%  '
            },
            {
              title: '0401 4 ... с содержанием жира более 6 мас.%, но не более 10 мас.% '
            },
            {
              title: '0401 5 ... с содержанием жира более 10 мас.%  '
            }
          ]
        },

      ]
    },
    {
      title: '05 Продукты животного происхождения, в другом месте не поименованные или не включенные   ',
      children: [{
          title: '0501 00 000 0 Человеческий волос, необработанный, мытый или немытый, очищенный или неочищенный; отходы человеческого волоса'
        },
        {
          title: '0502 ... Щетина свиная или кабанья; барсучий или прочий волос, используемый для производства щеточных изделий; их отходы',
          children: [{
              title: '0502 10 000 0 щетина свиная или кабанья и ее отходы '
            },
            {
              title: '0502 90 000 0 прочие  '
            }
          ]
        },
        {
          title: '0504 00 000 0 Кишки, пузыри и желудки животных (кроме рыбьих), целые и в кусках, свежие, охлажденные, замороженные, соленые, в рассоле, сушеные или копченые'
        },
        {
          title: '0505 ... Шкурки и прочие части птиц с перьями или пухом, перья и части перьев (с подрезанными или неподрезанными краями) и пух, очищенные, дезинфицированные или обработанные для хранения, но не подвергнутые дальнейшей обработке; порошок и отходы перьев или их частей',
          children: [{
              title: '0505 1 ... перья птиц, используемые для набивки; пух  '
            },
            {
              title: '0505 90 000 0 прочие  '
            }
          ]
        },
        {
          title: '0506 ... Кости и роговой стержень, необработанные, обезжиренные, подвергнутые первичной обработке (без придания формы), обработанные кислотой или дежелатинизированные; порошок и отходы этих продуктов',
          children: [{
              title: '0506 10 000 0 оссеин и кости, обработанные кислотой '
            },
            {
              title: '0506 90 000 0 прочие  '
            }
          ]
        },
        {
          title: '0507 ... Слоновая кость, панцири черепах, ус китовый и щетина из китового уса, рога, оленьи рога, копыта, ногти, когти и клювы, необработанные или подвергнутые первичной обработке, но без придания формы; порошок и отходы этих продуктов',
          children: [{
              title: '0507 10 000 0 слоновая кость; порошок и отходы  '
            },
            {
              title: '0507 90 000 0 прочие  '
            }
          ]
        },
        {
          title: '0508 00 000 0 Кораллы и аналогичные материалы, необработанные или подвергнутые первичной обработке; раковины и панцири моллюсков, ракообразных или иглокожих и скелетные пластины каракатиц, необработанные или подвергнутые первичной обработке, без придания формы, порошок и отходы этих продуктов'
        },
        {
          title: '0510 00 000 0 Амбра серая, струя бобровая, циветта и мускус; шпанки; желчь, в том числе сухая; железы и прочие продукты животного происхождения, используемые в производстве фармацевтических продуктов, свежие, охлажденные, мороженые или обработанные иным способом для кратковременного хранения'
        },
        {
          title: '0511 ... Продукты животного происхождения, в другом месте не поименованные или не включенные; павшие животные группы 01 или 03, непригодные для употребления в пищу',
          children: [{
              title: '0511 10 000 0 сперма бычья  '
            },
            {
              title: '0511 9 ... прочие '
            }
          ]
        }
      ]
    }
  ]
}, ]
.paragraph {
  padding-left: 10px;
}

.treeHTML details {
  display: block;
}

.treeHTML div {
  position: relative;
  margin: 0 0 0 .5em;
  padding: 0 0 0 1.2em;
}

.treeHTML div:not(:last-child) {
  border-left: 1px solid #ccc;
}

.treeHTML div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.1em;
  height: .5em;
  border-bottom: 1px solid #ccc;
}

.treeHTML div:last-child:before {
  border-left: 1px solid #ccc;
}

.treeHTML summary {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  content: url("https://samizdatt.net/templates/BlueSkin/dleimages/plus_fav.gif");
}

.treeHTML details[open] summary {
  outline: none;
}

details summary::-webkit-details-marker {
  display: none;
}

.TreeNodeText {
  position: relative;
  height: 100%;
  border: 1px solid #bbb;
  border-left: none;
  box-shadow: 0 2px 2px -2px;
  padding: 0 5px 0 10px;
  border-radius: 2px;
  min-width: 230px;
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  font-weight: 700;
  border-left: 1px solid #bbb;
  padding-bottom: 5px;
  padding-top: 5px;
  margin-bottom: 10px;
}

details summary:before {
  content: url("https://samizdatt.net/templates/BlueSkin/dleimages/plus_fav.gif");
  position: absolute;
  top: 10px;
  left: -8px;
}

details[open] > summary:before {
  content: url("http://cdn1.iconfinder.com/data/icons/splashyIcons/remove_minus_sign_small.png");
  position: absolute;
  top: 10px;
  left: -8px;
}
<div class="treeHTML" id="derevo"></div>

5
  • Благодарю за столь быструю помощь, может сможете подсказать как убрать лишении черточки в каждом блоке? 25 янв 2019 в 12:43
  • @ФессЛаеда точно также .treeHTML > div:before. Похоже, по ссылке не переходили)) 25 янв 2019 в 12:56
  • Хотя нет, не так. Есть побочный эффект, секунду...)) 25 янв 2019 в 12:58
  • 1
    @ФессЛаеда Попробуйте так .treeHTML .paragraph > div:before 25 янв 2019 в 13:04
  • Понял в каком направлении двигаться, как подберу нужный вариант, обновлю вопрос. Спасибо) 25 янв 2019 в 13:27

Ваш ответ

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

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