как правильно сверстать такое дерево

251
16 июля 2021, 18:40

Подскажите, как правильно сверстать такое дерево? я вроде сверстал, но как-то выглядит иначе.

.tree { 
  position: relative; 
  margin-bottom: 0; 
  padding-left: 20px; 
  list-style: none; 
} 
 
.tree a { 
    font-size: 15px; 
    font-style: normal; 
    font-weight: normal; 
    font-family: inherit; 
    color: #313131; 
} 
 
.tree > li > a { 
  padding-left: 15px; 
} 
 
.tree > li > a::before { 
  content: ''; 
  position: absolute; 
  top: 11px; 
  left: -6px; 
  width: 13px; 
  height: 11px; 
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAALCAYAAACksgdhAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACjSURBVHgBlZLBDcIwDEVtE3GGDRih66Coh4zCJAipgSNsQDeAEcoG4Yag2IT4QiUOzovkKFaefmQFtzE2c6Qj/CCCCeEdvPdX+INzzAshWk3bktfs3MXDadJl2LXtunfj6IZsbsAEaZIeuLdJXCp2cX/JWwNGXs/HkgAxQQUhhETCcqtwhm+hPKaKJH1VHofYJdG7RKSRtiC4F4mZzJIAlB/yAbXaOS8YuKGcAAAAAElFTkSuQmCC') no-repeat center; 
} 
 
.tree ul { 
   position: relative; 
   list-style: none; 
   margin-bottom: 0; 
   padding-left: 20px; 
} 
 
.tree ul::before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 1px; 
  height: 15px; 
  background: #A4A5A7; 
} 
 
.tree li { 
  position: relative; 
} 
 
.tree li::before { 
  content: ''; 
  position: absolute; 
  top: 15px; 
  left: -20px; 
  width: 1px; 
  height: 100%; 
  background: #A4A5A7; 
} 
 
.tree li::after { 
  content: ''; 
  position: absolute; 
  top: 14px; 
  left: -20px; 
  width: 20px; 
  height: 1px; 
  background: #A4A5A7; 
} 
 
.tree li:last-child::before { 
  display: none; 
}
<ul class="tree"> 
  <li><a href="/">dli:Role</a> 
    <ul> 
      <li><a href="/">pot:LocatedAt</a></li> 
      <li><a href="/">pot:BelongsTo</a></li> 
      <li><a href="/">pot:TenantAt</a></li> 
      <li><a href="/">pot:OwnerOf</a></li> 
      <li><a href="/">pot:OwnerAt</a></li> 
      <li><a href="/">pot:ManagerOf</a></li> 
      <li><a href="/">pot:ManagerAt</a></li> 
    </ul> 
  </li> 
  <li><a href="/">rdfs:Class</a> 
    <ul> 
      <li><a href="/">pot:Class</a></li> 
    </ul> 
  </li> 
  <li><a href="/">dli:Virtual</a> 
    <ul> 
      <li><a href="/">pot:Space</a> 
        <ul> 
          <li><a href="/">pot:RealEstate</a></li> 
          <li><a href="/">pot:Apartment</a></li> 
          <li><a href="/">pot:Zone</a></li> 
        </ul> 
      </li> 
      <li><a href="/">pot:Case</a></li> 
    </ul> 
  </li> 
  <li><a href="/">dli:Group</a> 
    <ul> 
      <li><a href="/">pot:Organization</a> 
        <ul> 
          <li><a href="/">pot:LimitedCompany</a> 
            <ul> 
              <li><a href="/">pot:HousingCooperative</a></li> 
            </ul> 
          </li> 
        </ul> 
      </li> 
    </ul> 
  </li> 
  <li><a href="/">dli:BuiltEnvironment</a> 
    <ul> 
      <li><a href="/">pot:Building</a></li> 
      <li><a href="/">pot:Storey</a></li> 
      <li><a href="/">pot:Room</a></li> 
    </ul> 
  </li> 
  <li><a href="/">dli:System</a> 
    <ul> 
      <li><a href="/">pot:BuildingSystems</a> 
        <ul> 
          <li><a href="/">pot:HeatingSystem</a></li> 
          <li><a href="/">pot:VentilationSystem</a></li> 
          <li><a href="/">pot:AirConditioningSystem</a></li> 
          <li><a href="/">pot:SewageSystem</a></li> 
          <li><a href="/">pot:PowerSystem</a></li> 
          <li><a href="/">pot:SecuritySystem</a></li> 
          <li><a href="/">pot:LightingSystem</a></li> 
          <li><a href="/">pot:BuildingAutomationSystem</a></li> 
          <li><a href="/">pot:VideoSurveillanceSystem</a></li> 
        </ul> 
      </li> 
    </ul> 
  </li> 
  <li><a href="/">dli:Thing</a> 
    <ul> 
      <li><a href="/">pot:Device</a> 
        <ul> 
          <li><a href="/">pot:QrCode</a></li> 
          <li><a href="/">pot:Sensor</a> 
            <ul> 
              <li><a href="/">pot:HumiditySensor</a></li> 
              <li><a href="/">pot:TemperatureSensor</a></li> 
              <li><a href="/">pot:CarbonDioxideSensor</a></li> 
              <li><a href="/">pot:QuantitySensor</a></li> 
              <li><a href="/">pot:PresenceSensor</a></li> 
            </ul> 
          </li> 
          <li><a href="/">pot:AirFilteringDevice</a></li> 
          <li><a href="/">pot:AirConditioningDevice</a></li> 
          <li><a href="/">pot:VentilationDevice</a></li> 
          <li><a href="/">pot:HeatingDevice</a> 
            <ul> 
              <li><a href="/">pot:Radiator</a></li> 
            </ul> 
          </li> 
          <li><a href="/">pot:PowerDevice</a></li> 
          <li><a href="/">pot:WaterDevice</a> 
            <ul> 
              <li><a href="/">pot:Faucet</a></li> 
            </ul> 
          </li> 
          <li><a href="/">pot:SecurityDevice</a></li> 
        </ul> 
      </li> 
      <li><a href="/">pot:BuildingElement</a> 
        <ul> 
          <li><a href="/">pot:Floor</a></li> 
          <li><a href="/">pot:Column</a></li> 
          <li><a href="/">pot:Slab</a></li> 
          <li><a href="/">pot:Beam</a></li> 
          <li><a href="/">pot:Wall</a></li> 
          <li><a href="/">pot:Window</a></li> 
          <li><a href="/">pot:Door</a></li> 
          <li><a href="/">pot:CurtainWall</a></li> 
          <li><a href="/">pot:Stair</a></li> 
          <li><a href="/">pot:Roof</a></li> 
        </ul> 
      </li> 
    </ul> 
  </li> 
</ul>

Answer 1

.tree { 
    margin-bottom: 0; 
} 
 
img, svg { 
  vertical-align: middle; 
} 
 
.tree, .tree ul { 
    position: relative; 
    padding-left: 20px; 
    list-style: none; 
} 
 
.tree .checker { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    position: absolute; 
    top: 8px; 
    left: -6px; 
    width: 12px; 
    height: 12px; 
    font-size: 11px; 
    font-weight: 700; 
    background: rgb(164, 165, 167); 
    color: rgb(235, 237, 239); 
    cursor: pointer; 
} 
 
.tree .checker.on { 
    background: rgb(0, 149, 255); 
    color: rgb(255, 255, 255); 
} 
 
.tree li { 
    position: relative; 
} 
 
.tree li:before { 
    content: ""; 
    position: absolute; 
    top: 13px; 
    left: 0; 
    width: 1px; 
    height: 100%; 
    background: rgb(164, 165, 167); 
} 
 
.tree ul { 
    margin: 0; 
} 
 
.tree svg { 
    fill: rgb(164, 165, 167); 
} 
 
svg { 
    overflow: hidden; 
} 
.tree .disabled, .tree a { 
    padding-left: 5px; 
    font-size: 12px; 
    font-style: normal; 
    font-weight: 400; 
    font-family: inherit; 
    color: rgb(49, 49, 49); 
} 
 
.tree ul li:before { 
    top: -6px; 
} 
 
.catch-active-wrapper { 
    display: flex; 
    flex-direction: row-reverse; 
    justify-content: flex-end; 
    align-items: center; 
} 
 
.tree .disabled, .tree a { 
    padding-left: 5px; 
    font-size: 12px; 
    font-style: normal; 
    font-weight: 400; 
    font-family: inherit; 
    color: rgb(49, 49, 49); 
} 
 
.tree li:last-child:before { 
    height: 1px; 
} 
 
.tree li { 
  padding-top: 3px; 
} 
 
.tree ul li:last-child:before { 
    height: 19px; 
}
<ul class="tree"> 
  <li><span class="checker on">-</span><span class="expand"><svg width="27" height="12" viewBox="0 0 27 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.280396 6.83429H16.8326" stroke="#A4A5A7"></path><path d="M20.9744 2.19993H24.9306C25.09 2.19993 25.2427 2.26322 25.3554 2.37587C25.468 2.48853 25.5313 2.64132 25.5313 2.80063V3.40133H14.7188V1.59923C14.7188 1.43992 14.782 1.28713 14.8947 1.17448C15.0073 1.06182 15.1601 0.998535 15.3195 0.998535H19.773L20.9744 2.19993ZM14.771 4.60273H25.4791C25.5622 4.60269 25.6444 4.6199 25.7205 4.65327C25.7966 4.68664 25.865 4.73544 25.9213 4.79658C25.9776 4.85773 26.0206 4.92989 26.0475 5.0085C26.0745 5.08711 26.0849 5.17046 26.078 5.25329L25.577 11.2603C25.5645 11.4104 25.496 11.5503 25.3852 11.6523C25.2744 11.7544 25.1293 11.811 24.9787 11.8111H15.2714C15.1208 11.811 14.9757 11.7544 14.8649 11.6523C14.754 11.5503 14.6856 11.4104 14.6731 11.2603L14.1721 5.25329C14.1652 5.17046 14.1756 5.08711 14.2026 5.0085C14.2295 4.92989 14.2725 4.85773 14.3288 4.79658C14.3851 4.73544 14.4535 4.68664 14.5296 4.65327C14.6057 4.6199 14.6879 4.60269 14.771 4.60273Z"></path></svg></span> 
    <span 
      class="disabled">dli:BuiltEnvironment</span> 
      <ul> 
        <li> 
          <div class="catch-active-wrapper"><a href="/v1/Context/Identity/Building">:Building</a><span class="expand"><svg width="26" height="14" viewBox="0 0 26 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.642944 6.64478H13.9595" stroke="#A4A5A7"></path><path d="M13.9596 7.14023H25.8696V12.6011C25.8696 12.9657 25.5752 13.2615 25.2126 13.2615H14.6166C14.5301 13.2613 14.4445 13.2441 14.3646 13.2108C14.2848 13.1775 14.2123 13.1288 14.1513 13.0675C14.0902 13.0061 14.0419 12.9334 14.009 12.8534C13.9761 12.7734 13.9593 12.6876 13.9596 12.6011L13.9596 7.14023ZM13.9596 0.68848C13.9596 0.323902 14.254 0.0281372 14.6166 0.0281372H25.2126C25.5752 0.0281372 25.8696 0.32324 25.8696 0.68848V6.14496H13.9596L13.9596 0.68848ZM17.9296 2.01314V3.33647H21.8996V2.01314H17.9296ZM17.9296 9.29147V10.6148H21.8996V9.29147H17.9296Z"></path></svg></span></div> 
        </li> 
        <li> 
          <div class="catch-active-wrapper"><a href="/v1/Context/Identity/Room">:Room</a><span class="expand"><svg width="26" height="14" viewBox="0 0 26 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.642944 6.64478H13.9595" stroke="#A4A5A7"></path><path d="M13.9596 7.14023H25.8696V12.6011C25.8696 12.9657 25.5752 13.2615 25.2126 13.2615H14.6166C14.5301 13.2613 14.4445 13.2441 14.3646 13.2108C14.2848 13.1775 14.2123 13.1288 14.1513 13.0675C14.0902 13.0061 14.0419 12.9334 14.009 12.8534C13.9761 12.7734 13.9593 12.6876 13.9596 12.6011L13.9596 7.14023ZM13.9596 0.68848C13.9596 0.323902 14.254 0.0281372 14.6166 0.0281372H25.2126C25.5752 0.0281372 25.8696 0.32324 25.8696 0.68848V6.14496H13.9596L13.9596 0.68848ZM17.9296 2.01314V3.33647H21.8996V2.01314H17.9296ZM17.9296 9.29147V10.6148H21.8996V9.29147H17.9296Z"></path></svg></span></div> 
        </li> 
        <li> 
          <div class="catch-active-wrapper"><a href="/v1/Context/Identity/Storey">:Storey</a><span class="expand"><svg width="26" height="14" viewBox="0 0 26 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.642944 6.64478H13.9595" stroke="#A4A5A7"></path><path d="M13.9596 7.14023H25.8696V12.6011C25.8696 12.9657 25.5752 13.2615 25.2126 13.2615H14.6166C14.5301 13.2613 14.4445 13.2441 14.3646 13.2108C14.2848 13.1775 14.2123 13.1288 14.1513 13.0675C14.0902 13.0061 14.0419 12.9334 14.009 12.8534C13.9761 12.7734 13.9593 12.6876 13.9596 12.6011L13.9596 7.14023ZM13.9596 0.68848C13.9596 0.323902 14.254 0.0281372 14.6166 0.0281372H25.2126C25.5752 0.0281372 25.8696 0.32324 25.8696 0.68848V6.14496H13.9596L13.9596 0.68848ZM17.9296 2.01314V3.33647H21.8996V2.01314H17.9296ZM17.9296 9.29147V10.6148H21.8996V9.29147H17.9296Z"></path></svg></span></div> 
        </li> 
      </ul> 
  </li> 
  <li><span class="checker on">-</span><span class="expand"><svg width="27" height="12" viewBox="0 0 27 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.280396 6.83429H16.8326" stroke="#A4A5A7"></path><path d="M20.9744 2.19993H24.9306C25.09 2.19993 25.2427 2.26322 25.3554 2.37587C25.468 2.48853 25.5313 2.64132 25.5313 2.80063V3.40133H14.7188V1.59923C14.7188 1.43992 14.782 1.28713 14.8947 1.17448C15.0073 1.06182 15.1601 0.998535 15.3195 0.998535H19.773L20.9744 2.19993ZM14.771 4.60273H25.4791C25.5622 4.60269 25.6444 4.6199 25.7205 4.65327C25.7966 4.68664 25.865 4.73544 25.9213 4.79658C25.9776 4.85773 26.0206 4.92989 26.0475 5.0085C26.0745 5.08711 26.0849 5.17046 26.078 5.25329L25.577 11.2603C25.5645 11.4104 25.496 11.5503 25.3852 11.6523C25.2744 11.7544 25.1293 11.811 24.9787 11.8111H15.2714C15.1208 11.811 14.9757 11.7544 14.8649 11.6523C14.754 11.5503 14.6856 11.4104 14.6731 11.2603L14.1721 5.25329C14.1652 5.17046 14.1756 5.08711 14.2026 5.0085C14.2295 4.92989 14.2725 4.85773 14.3288 4.79658C14.3851 4.73544 14.4535 4.68664 14.5296 4.65327C14.6057 4.6199 14.6879 4.60269 14.771 4.60273Z"></path></svg></span> 
    <span 
      class="disabled">dli:Group</span> 
      <ul> 
        <li> 
          <div class="catch-active-wrapper"><a href="/v1/Context/Identity/Organization">:Organization</a><span class="expand"><svg width="26" height="14" viewBox="0 0 26 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.642944 6.64478H13.9595" stroke="#A4A5A7"></path><path d="M13.9596 7.14023H25.8696V12.6011C25.8696 12.9657 25.5752 13.2615 25.2126 13.2615H14.6166C14.5301 13.2613 14.4445 13.2441 14.3646 13.2108C14.2848 13.1775 14.2123 13.1288 14.1513 13.0675C14.0902 13.0061 14.0419 12.9334 14.009 12.8534C13.9761 12.7734 13.9593 12.6876 13.9596 12.6011L13.9596 7.14023ZM13.9596 0.68848C13.9596 0.323902 14.254 0.0281372 14.6166 0.0281372H25.2126C25.5752 0.0281372 25.8696 0.32324 25.8696 0.68848V6.14496H13.9596L13.9596 0.68848ZM17.9296 2.01314V3.33647H21.8996V2.01314H17.9296ZM17.9296 9.29147V10.6148H21.8996V9.29147H17.9296Z"></path></svg></span></div> 
          <ul> 
            <li> 
              <div class="catch-active-wrapper"><a href="/v1/Context/Identity/Organization/LimitedCompany">:LimitedCompany</a><span class="expand"><svg width="26" height="14" viewBox="0 0 26 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.642944 6.64478H13.9595" stroke="#A4A5A7"></path><path d="M13.9596 7.14023H25.8696V12.6011C25.8696 12.9657 25.5752 13.2615 25.2126 13.2615H14.6166C14.5301 13.2613 14.4445 13.2441 14.3646 13.2108C14.2848 13.1775 14.2123 13.1288 14.1513 13.0675C14.0902 13.0061 14.0419 12.9334 14.009 12.8534C13.9761 12.7734 13.9593 12.6876 13.9596 12.6011L13.9596 7.14023ZM13.9596 0.68848C13.9596 0.323902 14.254 0.0281372 14.6166 0.0281372H25.2126C25.5752 0.0281372 25.8696 0.32324 25.8696 0.68848V6.14496H13.9596L13.9596 0.68848ZM17.9296 2.01314V3.33647H21.8996V2.01314H17.9296ZM17.9296 9.29147V10.6148H21.8996V9.29147H17.9296Z"></path></svg></span></div> 
              <ul> 
                <li> 
                  <div class="catch-active-wrapper"><a href="/v1/Context/Identity/Organization/LimitedCompany/HousingCooperative">:HousingCooperative</a><span class="expand"><svg width="26" height="14" viewBox="0 0 26 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.642944 6.64478H13.9595" stroke="#A4A5A7"></path><path d="M13.9596 7.14023H25.8696V12.6011C25.8696 12.9657 25.5752 13.2615 25.2126 13.2615H14.6166C14.5301 13.2613 14.4445 13.2441 14.3646 13.2108C14.2848 13.1775 14.2123 13.1288 14.1513 13.0675C14.0902 13.0061 14.0419 12.9334 14.009 12.8534C13.9761 12.7734 13.9593 12.6876 13.9596 12.6011L13.9596 7.14023ZM13.9596 0.68848C13.9596 0.323902 14.254 0.0281372 14.6166 0.0281372H25.2126C25.5752 0.0281372 25.8696 0.32324 25.8696 0.68848V6.14496H13.9596L13.9596 0.68848ZM17.9296 2.01314V3.33647H21.8996V2.01314H17.9296ZM17.9296 9.29147V10.6148H21.8996V9.29147H17.9296Z"></path></svg></span></div> 
                </li> 
              </ul> 
            </li> 
          </ul> 
        </li> 
      </ul> 
  </li> 
  <li><span class="checker on">-</span><span class="expand"><svg width="27" height="12" viewBox="0 0 27 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.280396 6.83429H16.8326" stroke="#A4A5A7"></path><path d="M20.9744 2.19993H24.9306C25.09 2.19993 25.2427 2.26322 25.3554 2.37587C25.468 2.48853 25.5313 2.64132 25.5313 2.80063V3.40133H14.7188V1.59923C14.7188 1.43992 14.782 1.28713 14.8947 1.17448C15.0073 1.06182 15.1601 0.998535 15.3195 0.998535H19.773L20.9744 2.19993ZM14.771 4.60273H25.4791C25.5622 4.60269 25.6444 4.6199 25.7205 4.65327C25.7966 4.68664 25.865 4.73544 25.9213 4.79658C25.9776 4.85773 26.0206 4.92989 26.0475 5.0085C26.0745 5.08711 26.0849 5.17046 26.078 5.25329L25.577 11.2603C25.5645 11.4104 25.496 11.5503 25.3852 11.6523C25.2744 11.7544 25.1293 11.811 24.9787 11.8111H15.2714C15.1208 11.811 14.9757 11.7544 14.8649 11.6523C14.754 11.5503 14.6856 11.4104 14.6731 11.2603L14.1721 5.25329C14.1652 5.17046 14.1756 5.08711 14.2026 5.0085C14.2295 4.92989 14.2725 4.85773 14.3288 4.79658C14.3851 4.73544 14.4535 4.68664 14.5296 4.65327C14.6057 4.6199 14.6879 4.60269 14.771 4.60273Z"></path></svg></span> 
    <span 
      class="disabled">dli:Role</span> 
      <ul> 
        <li> 
          <div class="catch-active-wrapper"><a href="/v1/Context/Link/BelongsTo">:BelongsTo</a><span class="expand"><svg width="26" height="14" viewBox="0 0 26 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.642944 6.64478H13.9595" stroke="#A4A5A7"></path><path d="M13.9596 7.14023H25.8696V12.6011C25.8696 12.9657 25.5752 13.2615 25.2126 13.2615H14.6166C14.5301 13.2613 14.4445 13.2441 14.3646 13.2108C14.2848 13.1775 14.2123 13.1288 14.1513 13.0675C14.0902 13.0061 14.0419 12.9334 14.009 12.8534C13.9761 12.7734 13.9593 12.6876 13.9596 12.6011L13.9596 7.14023ZM13.9596 0.68848C13.9596 0.323902 14.254 0.0281372 14.6166 0.0281372H25.2126C25.5752 0.0281372 25.8696 0.32324 25.8696 0.68848V6.14496H13.9596L13.9596 0.68848ZM17.9296 2.01314V3.33647H21.8996V2.01314H17.9296ZM17.9296 9.29147V10.6148H21.8996V9.29147H17.9296Z"></path></svg></span></div> 
        </li> 
        <li> 
          <div class="catch-active-wrapper"><a href="/v1/Context/Link/LocatedAt">:LocatedAt</a><span class="expand"><svg width="26" height="14" viewBox="0 0 26 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.642944 6.64478H13.9595" stroke="#A4A5A7"></path><path d="M13.9596 7.14023H25.8696V12.6011C25.8696 12.9657 25.5752 13.2615 25.2126 13.2615H14.6166C14.5301 13.2613 14.4445 13.2441 14.3646 13.2108C14.2848 13.1775 14.2123 13.1288 14.1513 13.0675C14.0902 13.0061 14.0419 12.9334 14.009 12.8534C13.9761 12.7734 13.9593 12.6876 13.9596 12.6011L13.9596 7.14023ZM13.9596 0.68848C13.9596 0.323902 14.254 0.0281372 14.6166 0.0281372H25.2126C25.5752 0.0281372 25.8696 0.32324 25.8696 0.68848V6.14496H13.9596L13.9596 0.68848ZM17.9296 2.01314V3.33647H21.8996V2.01314H17.9296ZM17.9296 9.29147V10.6148H21.8996V9.29147H17.9296Z"></path></svg></span></div> 
        </li> 
        <li> 
          <div class="catch-active-wrapper"><a href="/v1/Context/Link/ManagerAt">:ManagerAt</a><span class="expand"><svg width="26" height="14" viewBox="0 0 26 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.642944 6.64478H13.9595" stroke="#A4A5A7"></path><path d="M13.9596 7.14023H25.8696V12.6011C25.8696 12.9657 25.5752 13.2615 25.2126 13.2615H14.6166C14.5301 13.2613 14.4445 13.2441 14.3646 13.2108C14.2848 13.1775 14.2123 13.1288 14.1513 13.0675C14.0902 13.0061 14.0419 12.9334 14.009 12.8534C13.9761 12.7734 13.9593 12.6876 13.9596 12.6011L13.9596 7.14023ZM13.9596 0.68848C13.9596 0.323902 14.254 0.0281372 14.6166 0.0281372H25.2126C25.5752 0.0281372 25.8696 0.32324 25.8696 0.68848V6.14496H13.9596L13.9596 0.68848ZM17.9296 2.01314V3.33647H21.8996V2.01314H17.9296ZM17.9296 9.29147V10.6148H21.8996V9.29147H17.9296Z"></path></svg></span></div> 
        </li> 
        <li> 
          <div class="catch-active-wrapper"><a href="/v1/Context/Link/ManagerOf">:ManagerOf</a><span class="expand"><svg width="26" height="14" viewBox="0 0 26 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.642944 6.64478H13.9595" stroke="#A4A5A7"></path><path d="M13.9596 7.14023H25.8696V12.6011C25.8696 12.9657 25.5752 13.2615 25.2126 13.2615H14.6166C14.5301 13.2613 14.4445 13.2441 14.3646 13.2108C14.2848 13.1775 14.2123 13.1288 14.1513 13.0675C14.0902 13.0061 14.0419 12.9334 14.009 12.8534C13.9761 12.7734 13.9593 12.6876 13.9596 12.6011L13.9596 7.14023ZM13.9596 0.68848C13.9596 0.323902 14.254 0.0281372 14.6166 0.0281372H25.2126C25.5752 0.0281372 25.8696 0.32324 25.8696 0.68848V6.14496H13.9596L13.9596 0.68848ZM17.9296 2.01314V3.33647H21.8996V2.01314H17.9296ZM17.9296 9.29147V10.6148H21.8996V9.29147H17.9296Z"></path></svg></span></div> 
        </li> 
        <li> 
          <div class="catch-active-wrapper"><a href="/v1/Context/Link/OwnerAt">:OwnerAt</a><span class="expand"><svg width="26" height="14" viewBox="0 0 26 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.642944 6.64478H13.9595" stroke="#A4A5A7"></path><path d="M13.9596 7.14023H25.8696V12.6011C25.8696 12.9657 25.5752 13.2615 25.2126 13.2615H14.6166C14.5301 13.2613 14.4445 13.2441 14.3646 13.2108C14.2848 13.1775 14.2123 13.1288 14.1513 13.0675C14.0902 13.0061 14.0419 12.9334 14.009 12.8534C13.9761 12.7734 13.9593 12.6876 13.9596 12.6011L13.9596 7.14023ZM13.9596 0.68848C13.9596 0.323902 14.254 0.0281372 14.6166 0.0281372H25.2126C25.5752 0.0281372 25.8696 0.32324 25.8696 0.68848V6.14496H13.9596L13.9596 0.68848ZM17.9296 2.01314V3.33647H21.8996V2.01314H17.9296ZM17.9296 9.29147V10.6148H21.8996V9.29147H17.9296Z"></path></svg></span></div> 
        </li> 
        <li> 
          <div class="catch-active-wrapper"><a href="/v1/Context/Link/OwnerOf">:OwnerOf</a><span class="expand"><svg width="26" height="14" viewBox="0 0 26 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.642944 6.64478H13.9595" stroke="#A4A5A7"></path><path d="M13.9596 7.14023H25.8696V12.6011C25.8696 12.9657 25.5752 13.2615 25.2126 13.2615H14.6166C14.5301 13.2613 14.4445 13.2441 14.3646 13.2108C14.2848 13.1775 14.2123 13.1288 14.1513 13.0675C14.0902 13.0061 14.0419 12.9334 14.009 12.8534C13.9761 12.7734 13.9593 12.6876 13.9596 12.6011L13.9596 7.14023ZM13.9596 0.68848C13.9596 0.323902 14.254 0.0281372 14.6166 0.0281372H25.2126C25.5752 0.0281372 25.8696 0.32324 25.8696 0.68848V6.14496H13.9596L13.9596 0.68848ZM17.9296 2.01314V3.33647H21.8996V2.01314H17.9296ZM17.9296 9.29147V10.6148H21.8996V9.29147H17.9296Z"></path></svg></span></div> 
        </li> 
        <li> 
          <div class="catch-active-wrapper"><a href="/v1/Context/Link/TenantAt">:TenantAt</a><span class="expand"><svg width="26" height="14" viewBox="0 0 26 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.642944 6.64478H13.9595" stroke="#A4A5A7"></path><path d="M13.9596 7.14023H25.8696V12.6011C25.8696 12.9657 25.5752 13.2615 25.2126 13.2615H14.6166C14.5301 13.2613 14.4445 13.2441 14.3646 13.2108C14.2848 13.1775 14.2123 13.1288 14.1513 13.0675C14.0902 13.0061 14.0419 12.9334 14.009 12.8534C13.9761 12.7734 13.9593 12.6876 13.9596 12.6011L13.9596 7.14023ZM13.9596 0.68848C13.9596 0.323902 14.254 0.0281372 14.6166 0.0281372H25.2126C25.5752 0.0281372 25.8696 0.32324 25.8696 0.68848V6.14496H13.9596L13.9596 0.68848ZM17.9296 2.01314V3.33647H21.8996V2.01314H17.9296ZM17.9296 9.29147V10.6148H21.8996V9.29147H17.9296Z"></path></svg></span></div> 
        </li> 
      </ul> 
  </li> 
  <li><span class="checker on">-</span><span class="expand"><svg width="27" height="12" viewBox="0 0 27 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.280396 6.83429H16.8326" stroke="#A4A5A7"></path><path d="M20.9744 2.19993H24.9306C25.09 2.19993 25.2427 2.26322 25.3554 2.37587C25.468 2.48853 25.5313 2.64132 25.5313 2.80063V3.40133H14.7188V1.59923C14.7188 1.43992 14.782 1.28713 14.8947 1.17448C15.0073 1.06182 15.1601 0.998535 15.3195 0.998535H19.773L20.9744 2.19993ZM14.771 4.60273H25.4791C25.5622 4.60269 25.6444 4.6199 25.7205 4.65327C25.7966 4.68664 25.865 4.73544 25.9213 4.79658C25.9776 4.85773 26.0206 4.92989 26.0475 5.0085C26.0745 5.08711 26.0849 5.17046 26.078 5.25329L25.577 11.2603C25.5645 11.4104 25.496 11.5503 25.3852 11.6523C25.2744 11.7544 25.1293 11.811 24.9787 11.8111H15.2714C15.1208 11.811 14.9757 11.7544 14.8649 11.6523C14.754 11.5503 14.6856 11.4104 14.6731 11.2603L14.1721 5.25329C14.1652 5.17046 14.1756 5.08711 14.2026 5.0085C14.2295 4.92989 14.2725 4.85773 14.3288 4.79658C14.3851 4.73544 14.4535 4.68664 14.5296 4.65327C14.6057 4.6199 14.6879 4.60269 14.771 4.60273Z"></path></svg></span> 
    <span 
      class="disabled">dli:System</span> 
      <ul> 
        <li> 
          <div class="catch-active-wrapper"><a href="/v1/Context/Identity/BuildingSystems">:BuildingSystems</a><span class="expand"><svg width="26" height="14" viewBox="0 0 26 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.642944 6.64478H13.9595" stroke="#A4A5A7"></path><path d="M13.9596 7.14023H25.8696V12.6011C25.8696 12.9657 25.5752 13.2615 25.2126 13.2615H14.6166C14.5301 13.2613 14.4445 13.2441 14.3646 13.2108C14.2848 13.1775 14.2123 13.1288 14.1513 13.0675C14.0902 13.0061 14.0419 12.9334 14.009 12.8534C13.9761 12.7734 13.9593 12.6876 13.9596 12.6011L13.9596 7.14023ZM13.9596 0.68848C13.9596 0.323902 14.254 0.0281372 14.6166 0.0281372H25.2126C25.5752 0.0281372 25.8696 0.32324 25.8696 0.68848V6.14496H13.9596L13.9596 0.68848ZM17.9296 2.01314V3.33647H21.8996V2.01314H17.9296ZM17.9296 9.29147V10.6148H21.8996V9.29147H17.9296Z"></path></svg></span></div> 
          <ul> 
            <li> 
              <div class="catch-active-wrapper"><a href="/v1/Context/Identity/BuildingSystems/AirConditioningSystem">:AirConditioningSystem</a><span class="expand"><svg width="26" height="14" viewBox="0 0 26 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.642944 6.64478H13.9595" stroke="#A4A5A7"></path><path d="M13.9596 7.14023H25.8696V12.6011C25.8696 12.9657 25.5752 13.2615 25.2126 13.2615H14.6166C14.5301 13.2613 14.4445 13.2441 14.3646 13.2108C14.2848 13.1775 14.2123 13.1288 14.1513 13.0675C14.0902 13.0061 14.0419 12.9334 14.009 12.8534C13.9761 12.7734 13.9593 12.6876 13.9596 12.6011L13.9596 7.14023ZM13.9596 0.68848C13.9596 0.323902 14.254 0.0281372 14.6166 0.0281372H25.2126C25.5752 0.0281372 25.8696 0.32324 25.8696 0.68848V6.14496H13.9596L13.9596 0.68848ZM17.9296 2.01314V3.33647H21.8996V2.01314H17.9296ZM17.9296 9.29147V10.6148H21.8996V9.29147H17.9296Z"></path></svg></span></div> 
            </li> 
            <li> 
              <div class="catch-active-wrapper"><a href="/v1/Context/Identity/BuildingSystems/BuildingAutomationSystem">:BuildingAutomationSystem</a><span class="expand"><svg width="26" height="14" viewBox="0 0 26 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.642944 6.64478H13.9595" stroke="#A4A5A7"></path><path d="M13.9596 7.14023H25.8696V12.6011C25.8696 12.9657 25.5752 13.2615 25.2126 13.2615H14.6166C14.5301 13.2613 14.4445 13.2441 14.3646 13.2108C14.2848 13.1775 14.2123 13.1288 14.1513 13.0675C14.0902 13.0061 14.0419 12.9334 14.009 12.8534C13.9761 12.7734 13.9593 12.6876 13.9596 12.6011L13.9596 7.14023ZM13.9596 0.68848C13.9596 0.323902 14.254 0.0281372 14.6166 0.0281372H25.2126C25.5752 0.0281372 25.8696 0.32324 25.8696 0.68848V6.14496H13.9596L13.9596 0.68848ZM17.9296 2.01314V3.33647H21.8996V2.01314H17.9296ZM17.9296 9.29147V10.6148H21.8996V9.29147H17.9296Z"></path></svg></span></div> 
            </li> 
            <li> 
              <div class="catch-active-wrapper"><a href="/v1/Context/Identity/BuildingSystems/HeatingSystem">:HeatingSystem</a><span class="expand"><svg width="26" height="14" viewBox="0 0 26 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.642944 6.64478H13.9595" stroke="#A4A5A7"></path><path d="M13.9596 7.14023H25.8696V12.6011C25.8696 12.9657 25.5752 13.2615 25.2126 13.2615H14.6166C14.5301 13.2613 14.4445 13.2441 14.3646 13.2108C14.2848 13.1775 14.2123 13.1288 14.1513 13.0675C14.0902 13.0061 14.0419 12.9334 14.009 12.8534C13.9761 12.7734 13.9593 12.6876 13.9596 12.6011L13.9596 7.14023ZM13.9596 0.68848C13.9596 0.323902 14.254 0.0281372 14.6166 0.0281372H25.2126C25.5752 0.0281372 25.8696 0.32324 25.8696 0.68848V6.14496H13.9596L13.9596 0.68848ZM17.9296 2.01314V3.33647H21.8996V2.01314H17.9296ZM17.9296 9.29147V10.6148H21.8996V9.29147H17.9296Z"></path></svg></span></div> 
            </li> 
            <li> 
              <div class="catch-active-wrapper"><a href="/v1/Context/Identity/BuildingSystems/LightingSystem">:LightingSystem</a><span class="expand"><svg width="26" height="14" viewBox="0 0 26 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.642944 6.64478H13.9595" stroke="#A4A5A7"></path><path d="M13.9596 7.14023H25.8696V12.6011C25.8696 12.9657 25.5752 13.2615 25.2126 13.2615H14.6166C14.5301 13.2613 14.4445 13.2441 14.3646 13.2108C14.2848 13.1775 14.2123 13.1288 14.1513 13.0675C14.0902 13.0061 14.0419 12.9334 14.009 12.8534C13.9761 12.7734 13.9593 12.6876 13.9596 12.6011L13.9596 7.14023ZM13.9596 0.68848C13.9596 0.323902 14.254 0.0281372 14.6166 0.0281372H25.2126C25.5752 0.0281372 25.8696 0.32324 25.8696 0.68848V6.14496H13.9596L13.9596 0.68848ZM17.9296 2.01314V3.33647H21.8996V2.01314H17.9296ZM17.9296 9.29147V10.6148H21.8996V9.29147H17.9296Z"></path></svg></span></div> 
            </li> 
            <li> 
              <div class="catch-active-wrapper"><a href="/v1/Context/Identity/BuildingSystems/PowerSystem">:PowerSystem</a><span class="expand"><svg width="26" height="14" viewBox="0 0 26 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.642944 6.64478H13.9595" stroke="#A4A5A7"></path><path d="M13.9596 7.14023H25.8696V12.6011C25.8696 12.9657 25.5752 13.2615 25.2126 13.2615H14.6166C14.5301 13.2613 14.4445 13.2441 14.3646 13.2108C14.2848 13.1775 14.2123 13.1288 14.1513 13.0675C14.0902 13.0061 14.0419 12.9334 14.009 12.8534C13.9761 12.7734 13.9593 12.6876 13.9596 12.6011L13.9596 7.14023ZM13.9596 0.68848C13.9596 0.323902 14.254 0.0281372 14.6166 0.0281372H25.2126C25.5752 0.0281372 25.8696 0.32324 25.8696 0.68848V6.14496H13.9596L13.9596 0.68848ZM17.9296 2.01314V3.33647H21.8996V2.01314H17.9296ZM17.9296 9.29147V10.6148H21.8996V9.29147H17.9296Z"></path></svg></span></div> 
            </li> 
            <li> 
              <div class="catch-active-wrapper"><a href="/v1/Context/Identity/BuildingSystems/SecuritySystem">:SecuritySystem</a><span class="expand"><svg width="26" height="14" viewBox="0 0 26 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.642944 6.64478H13.9595" stroke="#A4A5A7"></path><path d="M13.9596 7.14023H25.8696V12.6011C25.8696 12.9657 25.5752 13.2615 25.2126 13.2615H14.6166C14.5301 13.2613 14.4445 13.2441 14.3646 13.2108C14.2848 13.1775 14.2123 13.1288 14.1513 13.0675C14.0902 13.0061 14.0419 12.9334 14.009 12.8534C13.9761 12.7734 13.9593 12.6876 13.9596 12.6011L13.9596 7.14023ZM13.9596 0.68848C13.9596 0.323902 14.254 0.0281372 14.6166 0.0281372H25.2126C25.5752 0.0281372 25.8696 0.32324 25.8696 0.68848V6.14496H13.9596L13.9596 0.68848ZM17.9296 2.01314V3.33647H21.8996V2.01314H17.9296ZM17.9296 9.29147V10.6148H21.8996V9.29147H17.9296Z"></path></svg></span></div> 
            </li> 
            <li> 
              <div class="catch-active-wrapper"><a href="/v1/Context/Identity/BuildingSystems/SewageSystem">:SewageSystem</a><span class="expand"><svg width="26" height="14" viewBox="0 0 26 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.642944 6.64478H13.9595" stroke="#A4A5A7"></path><path d="M13.9596 7.14023H25.8696V12.6011C25.8696 12.9657 25.5752 13.2615 25.2126 13.2615H14.6166C14.5301 13.2613 14.4445 13.2441 14.3646 13.2108C14.2848 13.1775 14.2123 13.1288 14.1513 13.0675C14.0902 13.0061 14.0419 12.9334 14.009 12.8534C13.9761 12.7734 13.9593 12.6876 13.9596 12.6011L13.9596 7.14023ZM13.9596 0.68848C13.9596 0.323902 14.254 0.0281372 14.6166 0.0281372H25.2126C25.5752 0.0281372 25.8696 0.32324 25.8696 0.68848V6.14496H13.9596L13.9596 0.68848ZM17.9296 2.01314V3.33647H21.8996V2.01314H17.9296ZM17.9296 9.29147V10.6148H21.8996V9.29147H17.9296Z"></path></svg></span></div> 
            </li> 
            <li> 
              <div class="catch-active-wrapper"><a href="/v1/Context/Identity/BuildingSystems/VentilationSystem">:VentilationSystem</a><span class="expand"><svg width="26" height="14" viewBox="0 0 26 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.642944 6.64478H13.9595" stroke="#A4A5A7"></path><path d="M13.9596 7.14023H25.8696V12.6011C25.8696 12.9657 25.5752 13.2615 25.2126 13.2615H14.6166C14.5301 13.2613 14.4445 13.2441 14.3646 13.2108C14.2848 13.1775 14.2123 13.1288 14.1513 13.0675C14.0902 13.0061 14.0419 12.9334 14.009 12.8534C13.9761 12.7734 13.9593 12.6876 13.9596 12.6011L13.9596 7.14023ZM13.9596 0.68848C13.9596 0.323902 14.254 0.0281372 14.6166 0.0281372H25.2126C25.5752 0.0281372 25.8696 0.32324 25.8696 0.68848V6.14496H13.9596L13.9596 0.68848ZM17.9296 2.01314V3.33647H21.8996V2.01314H17.9296ZM17.9296 9.29147V10.6148H21.8996V9.29147H17.9296Z"></path></svg></span></div> 
            </li> 
            <li> 
              <div class="catch-active-wrapper"><a href="/v1/Context/Identity/BuildingSystems/VideoSurveillanceSystem">:VideoSurveillanceSystem</a><span class="expand"><svg width="26" height="14" viewBox="0 0 26 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.642944 6.64478H13.9595" stroke="#A4A5A7"></path><path d="M13.9596 7.14023H25.8696V12.6011C25.8696 12.9657 25.5752 13.2615 25.2126 13.2615H14.6166C14.5301 13.2613 14.4445 13.2441 14.3646 13.2108C14.2848 13.1775 14.2123 13.1288 14.1513 13.0675C14.0902 13.0061 14.0419 12.9334 14.009 12.8534C13.9761 12.7734 13.9593 12.6876 13.9596 12.6011L13.9596 7.14023ZM13.9596 0.68848C13.9596 0.323902 14.254 0.0281372 14.6166 0.0281372H25.2126C25.5752 0.0281372 25.8696 0.32324 25.8696 0.68848V6.14496H13.9596L13.9596 0.68848ZM17.9296 2.01314V3.33647H21.8996V2.01314H17.9296ZM17.9296 9.29147V10.6148H21.8996V9.29147H17.9296Z"></path></svg></span></div> 
            </li> 
          </ul> 
        </li> 
      </ul> 
  </li> 
</ul>

READ ALSO
Не работает часть функционала на сайте
HTML

Не работает часть функционала на сайте

Может вопрос не совсем для сюда, но я не знаю куда обратиться ещеРаботаю над одним сайтом и часть функционала не работает, точнее не принимаются...

 180
JavaScript анимация перемещение элемента
HTML

JavaScript анимация перемещение элемента

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

 226
Проверка инпута ФИО + появление новых инпутов по мере заполнения(javascript)
HTML

Проверка инпута ФИО + появление новых инпутов по мере заполнения(javascript)

Задача в том что по окончанию заполнения первого инпута "Фамилия", ниже появлялся второй "Имя" и затем третий "Отчество" (который к заполнению...

 387
Почему не парсится RSS
HTML

Почему не парсится RSS

Решил сделать на основе вот этого видео расширение парсерСделал, но оно выдает ошибку

 292