Question

最初我已应用此代码来创建可折叠文本。这没有任何问题

let message = "Foo Bar :regional_indicator_n: Baz";
message = message.replace(/:regional_indicator_(n|w|o|r|d):/g, "");

console.log(message);

    var coll = document.getElementsByClassName("collapsible");
    var i;
     
    for (i = 0; i < coll.length; i++) {
      coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.maxHeight){
          content.style.maxHeight = null;
        } else {
          content.style.maxHeight = content.scrollHeight + "px";
        } 
      });
    }

    .collapsible {
        background-color: #777;
        color: white;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
    }
     
    .active, .collapsible:hover {
        background-color: #555;
    }
     
    .collapsible:after {
        content: '\002B';
        color: white;
        font-weight: bold;
        float: right;
        margin-left: 5px;
    }
     
    .active:after {
        content: "\2212";
    }
     
    .content {
        padding: 0 18px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        background-color: #f1f1f1;
    }

最近我一直试图实现其他功能。通过在同一页面的其他位置放置文本，然后单击该文本，我希望网站移动到可折叠文本并展开它。

     
     
    <button class="collapsible" id="collapsible ">Unfolds text</button>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

使用与script-tag中指定的相同的javascript可以实现吗？我已经尝试使用onclick-function（在javascript中包含相同的if循环），但这不起作用。

感谢您的想法和合作。

Answer 1

你真的不需要为这种表现效果部署javascript。

使用伪元素:target可以单独使用CSS实现效果。

工作示例：

section {
height: 60px;
overflow-y: hidden;
transition: height 0.6s linear;
}

section:target {
height: 160px;
}

section h2 {
position: relative;
height: 48px;
margin-bottom: 0;
padding: 0 6px;
line-height: 48px;
font-size: 16px;
font-weight: bold;
color: rgb(255, 255, 255);
font-family: arial, helvetica, sans-serif;
background-color: rgb(95, 95, 95);
cursor: pointer;
}

section:hover h2 {
background-color: rgb(63, 63, 63);
}

section a h2 {
color: rgb(255, 255, 255);
text-decoration: none;
}

section h2::after {
content: '+';
display: block;
position: absolute;
top: 0;
right: 6px;
font-size: 48px;
}

section:target h2::after {
content: '-';
font-size: 60px;
}

section h2 + div p {
margin-top: 0;
}

<section id="section1">
<a href="#section1"><h2>Unfolds Section 1</h2></a>
<div>
<p>Lorem ipsum dolor sit amet. Go to <a href="#section2">Section 2</a>. Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Go to <a href="#section3">Section 3</a>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</section>

<section id="section2">
<a href="#section2"><h2>Unfolds Section 2</h2></a>
<div>
<p>Lorem ipsum dolor sit amet. Go to <a href="#section3">Section 3</a>. Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Go to <a href="#section1">Section 1</a>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</section>

<section id="section3">
<a href="#section3"><h2>Unfolds Section 3</h2></a>
<div>
<p>Lorem ipsum dolor sit amet. Go to <a href="#section1">Section 1</a>. Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Go to <a href="#section2">Section 2</a>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</section>

<p>Go to <a href="#section1">Section 1</a></p>
<p>Go to <a href="#section2">Section 2</a></p>
<p>Go to <a href="#section3">Section 3</a></p>

Javascript：可折叠文本和可折叠文本的链接

1 个答案: