मैं पहले ली तत्वों के साथ एक लंबवत रेखा जोड़ने की कोशिश कर रहा हूं जब उनका विस्तार किया जाता है और बंद होने पर हटा दिया जाता है लेकिन यह बाहर नहीं आ रहा है। विल ली :: जॉब न करने के बाद?. इसमें मेरी मदद करो।

यह लंबवत रेखा केवल वंशानुक्रम के पहले स्तर के साथ होनी चाहिए

मैंने तीन सूची वस्तुओं के साथ एक वृक्षदृश्य बनाया है और लागू कोड दिखाया है जिसमें मुझे लंबवत रेखाएं लागू करनी हैं

var toggler = document.getElementsByClassName("caret");
var i;

for (i = 0; i < toggler.length; i++) {
  toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".nested").classList.toggle("active");
    this.classList.toggle("caret-down");
  });
}
ul, #main {
  list-style-type: none;
}

#myUL {
  margin: 0;
  padding: 0;

}
li::after{
border-left 1px solid black;
}
.caret {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none; 
  -ms-user-select: none; 
}

.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

.caret-down::before {
  -ms-transform: rotate(90deg); 
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);  
}

.nested {
  display: none;
  border-left 1px solid #000
}

.active {
  display: block;
  border-left 1px solid #000
}
<ul id="main">
  <li><span class="caret">First</span>
    <ul class="nested">
      <li>sub1</li>
      <li>sub2</li></ul>
      <li><span class="caret">Second</span>
        <ul class="nested">
          <li>sub1</li>
          <li>sub2</li></ul>
          <li><span class="caret">Third</span>
            <ul class="nested">
              <li>sub1</li>
              <li>sub2</li>
            </ul>
          </li>
      </li>  
  </li>
</ul>
1
kavya 8 सितंबर 2020, 08:20

1 उत्तर

सबसे बढ़िया उत्तर

आप इसे नीचे दिए गए .nested.active सीएसएस नियम के साथ कर सकते हैं:

आपको नीचे सीएसएस जोड़ना चाहिए:

.nested.active{
   border-left:1px solid red;
}

इसे इस स्निपेट में जोड़ा गया है:

var toggler = document.getElementsByClassName("caret");
var i;

for (i = 0; i < toggler.length; i++) {
  toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".nested").classList.toggle("active");
    this.classList.toggle("caret-down");
  });
}
ul, #main {
  list-style-type: none;
}

#myUL {
  margin: 0;
  padding: 0;

}
li::after{
border-left 1px solid black;
}
.caret {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none; 
  -ms-user-select: none; 
}

.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

.caret-down::before {
  -ms-transform: rotate(90deg); 
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);  
}

.nested {
  display: none;
  border-left 1px solid #000
}

.active {
  display: block;
  border-left 1px solid #000
}
.nested.active{
border-left:1px solid red;
}
<ul id="main">
  <li><span class="caret">First</span>
    <ul class="nested">
      <li>sub1</li>
      <li>sub2</li></ul>
      <li><span class="caret">Second</span>
        <ul class="nested">
          <li>sub1</li>
          <li>sub2</li></ul>
          <li><span class="caret">Third</span>
            <ul class="nested">
              <li>sub1</li>
              <li>sub2</li>
            </ul>
          </li>
      </li>  
  </li>
</ul>
3
Rayees AC 8 सितंबर 2020, 05:35