Question

我制作了一个简单的树列表，其中包含一些文本区域以及扩展和折叠的元素，这里是：https://jsfiddle.net/Obliterator/wogurs6L/1/

html：

<ul id="myUL">
    <li><span class="caret"></span>
        <textarea style="width: 100%"></textarea>
        <ul class="nested">
            <li>
                <textarea></textarea>
            </li>
            <li>
                <textarea></textarea>
            </li>
            <li><span class="caret"></span>
                <textarea></textarea>
                <ul class="nested">
                    <li>
                        <textarea></textarea>
                    </li>
                    <li>
                        <textarea></textarea>
                    </li>
                    <li><span class="caret"></span>
                        <textarea></textarea>
                        <ul class="nested">
                            <li>
                                <textarea></textarea>
                            </li>
                            <li>
                                <textarea></textarea>
                            </li>
                            <li>
                                <textarea></textarea>
                            </li>
                            <li>
                                <textarea></textarea>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

css：

/* Remove default bullets */
ul, #myUL {
  list-style-type: none;
}

/* Remove margins and padding from the parent ul */
#myUL {
  margin: 0;
  padding: 0;
}

/* Style the caret/arrow */
.caret {
  cursor: pointer;
  user-select: none; /* Prevent text selection */
}

/* Create the caret/arrow with a unicode, and style it */
.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
  vertical-align: top;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
  transform: rotate(90deg);
}

/* Hide the nested list */
.nested {
  display: none;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
  display: block;
}

javascript：

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");
    });
}

它工作正常，但是，我需要root字符串，textareas占用所有字符串空间，exept空间，由指针占用。如果我为textareas设置style =“ width 100％”，那么在本示例中，我总是将指针推到顶部（在示例中，您可以在第一个字符串中看到它），但是我需要textarea接受所有自由字符串空间，但指针仍停留在左侧。我该怎么办？

Answer 1

尝试这种风格：

<li style="padding-left: 15px;position: relative;">
 <span class="caret"style="position: absolute;left: 0;"></span>
    <textarea style="width: 100%"></textarea>
...

Answer 2

我不明白你的意思。但是您要谈论的是<ul>标签中的左填充。

您可以添加到CSS

#myUL ul {padding:0; margin:0;}
#myUL textarea {width:100%;}

<textarea>在<ul>树视图中的定位

2 个答案: