主页 / user-592850

Terra's questions

Martin Hope
Terra
Asked: 2024-11-01 13:06:58 +0000 UTC
  • 5
const [data, setData] = useState(AccordionData)

const AccordionItems = data.map((item) => {

    const OpenClose = (id) => {

        if (id === item.id) {
            setData(data => ([{
                ...data,
                open: true
            }]))

        } else {
            setData(data => ([{
                ...data,
                open: false
            }]))
        }
    }

    return <AccordionItem 
    item={item} 
    key={item.id} 
    OpenClose={OpenClose} 
    id={item.id}
    open={item.open}
    />
})

当我运行该函数时，所有元素都会重置，只有一个元素保留为无文本

javascript
Martin Hope
Terra
Asked: 2024-10-24 20:38:18 +0000 UTC
  • 5
import { useState } from "react"
import "./HiddenText.css"

const TextList = [
    {textStart: "Twenty-five hours had passed since the incident. It seemed to be a lot longer than that.", 
    textEnd: " That twenty-five hours seemed more like a week in her mind. The fact that she still was having trouble comprehending exactly what took place wasn't helping the matter. She thought if she could just get a little rest the entire incident might make a little more sense.",
    threeDots: "...",  
    key: 1},

    {textStart: "Another productive way to use this tool to begin a daily writing routine.", 
    textEnd: " One way is to generate a random paragraph with the intention to try to rewrite it while still keeping the original meaning. The purpose here is to just get the writing started so that when the writer goes onto their day's writing projects, words are already flowing from their fingers.",
    threeDots: "...",   
    key: 2},

    {textStart: "Another productive way to use this tool to begin a daily writing routine.", 
    textEnd: " One way is to generate a random paragraph with the intention to try to rewrite it while still keeping the original meaning. The purpose here is to just get the writing started so that when the writer goes onto their day's writing projects, words are already flowing from their fingers.",
    threeDots: "...",   
    key: 3},

    {textStart: "Another productive way to use this tool to begin a daily writing routine.", 
    textEnd: " One way is to generate a random paragraph with the intention to try to rewrite it while still keeping the original meaning. The purpose here is to just get the writing started so that when the writer goes onto their day's writing projects, words are already flowing from their fingers.",
    threeDots: "...",   
    key: 4},


]

export default function HiddenText() {
    const [toggleText, setToggleText] = useState(false)
    const [toggleThreeDots, setThreeDots] = useState(true)
    const [textBtn, setTextBtn] = useState("показать дополнительно")

    function openText() {
        setToggleText(toggleText => !toggleText)
        setThreeDots(toggleThreeDots => !toggleThreeDots)
        
        if (textBtn === "показать дополнительно") {
            setTextBtn("скрыть")
        } else {
            setTextBtn("показать дополнительно")
        }
    }
    
    return(
        <div className="HiddenTextContainer">
            {
                TextList.map(item => {
                    return(
                        <div className="elemCartText" key={item.key}>
                            <p>

                                {item.textStart}
 
                                {toggleThreeDots && <span>
                                    {item.threeDots}
                                </span>}

                                {toggleText && <span>
                                    {item.textEnd}
                                </span>}

                            </p>

                            <button onClick={openText}>
                                 {textBtn}
                            </button>
                        </div>

                    )
                })
            }
        </div>
    )
}
javascript
Martin Hope
Terra
Asked: 2024-09-23 22:03:08 +0000 UTC
  • 5

如何将任务保存在 localStorage 中，以便它们在页面重新加载后不会消失？

const contant__form = document.querySelector('.contant__form');
const container__task = document.querySelector('.container__task');


contant__form.addEventListener('submit',  addTask);
container__task.addEventListener('click', delTask);


function addTask(e) {
    e.preventDefault()
    const input = document.querySelector('.contant__form-input');

    if (!input.value == "") {
        
        const Html =`<div class="task">
                        <h1>${input.value}</h1>

                        <div class="btn__task">
                            <div class="container__del-task" data-action="del">
                                 <span class="container__del-btn"></span>
                            </div>
                        </div>
                    </div>`;

        container__task.innerHTML += Html
        
        input.value = "";
        input.focus();
    };
};



function delTask(e) {
    self = e.target;

    if (self.classList.contains('container__del-task')) {
        const parentTask = e.target.closest('.task');
        parentTask.remove();
    };

    
};
.ToDo{
    background-color: #485268;
    padding-top: 50px;
    padding-bottom: 20px;
    height: 100%;
}

.container{
    max-width: 1000px;
    margin: 0 auto;
    padding: 10px 15px;
}

.grid{
    display: grid;
    grid-template-columns: minmax(300px, 600px) 1fr;

    gap: 20px;

    align-items: center;
}

@media (max-width: 880px) {
    .grid{
        display: grid;
        grid-template-columns: minmax(100px, 900px);
    
        gap: 20px;
    
        align-items: center;
    }
    
}

.container__task{
    background-color: #626f8b;

    border-radius: 5px;
    padding: 10px 15px;
}

.task{
    display: flex;
    justify-content: space-between;
    align-items: center;

    background-color: #7c8db3;

    padding: 10px 15px;
    margin: 10px 0px;

    border: 1px solid black;
    border-radius: 10px;

    overflow: hidden;
}

.task h1{
    font-size: 1.2rem;

}


.btn__task{
    display: flex;
    justify-content: center;
}



.container__del-task{
    width: 50px;
    height: 50px;
    
    background-color: #90a4d1;
    border: 1px solid black;

    border-radius: 5px;
}

.container__del-task:hover{

    background-color: #6f91e0;
}

.container__del-task{
    position: relative;
}

.container__del-btn::after{
    content: "";
    position: absolute;

    top: 25px;
    left: 5px;

    transform: rotate(50deg);
    
    width: 40px;
    height: 2px;

    background-color: black;
}

.container__del-btn::before{
    content: "";
    position: absolute;

    top: 25px;
    left: 5px;

    transform: rotate(-50deg);
    
    width: 40px;
    height: 2px;

    background-color: black;
}

.contant__form{
    display: flex;
    flex-direction: column;

    justify-content: center;

    max-width: 500px;
    background-color: #626f8b;

    border-radius: 5px;

    padding: 10px 5px;

    
}

.contant__form-input{
    padding: 10px;
    margin: 10px;

    width: 300px;
    border-radius: 10px;

    background-color: #90a4d1;

    font-size: 1.1rem;

}

.contant__form-btn{
    display: flex;


    padding: 10px;
    margin: 10px;

    width: 320px;
    border-radius: 10px;

    background-color: #90a4d1;

    font-size: 1.1rem;
    
}
<section class="ToDo">
        <div class="container">
            <div class="grid">
                <div class="container__task">

                </div>

                <form class="contant__form">
                    <input type="text" class="contant__form-input" placeholder="Введите задачу">
                    <button class="contant__form-btn">Отправить</button>
                </form>
            </div>
        </div>
    </section>`

javascript
Martin Hope
Terra
Asked: 2024-05-31 23:47:41 +0000 UTC
  • 6

var btn = document.querySelector('.btn');
var li_btn = document.querySelector('.li_btn');

btn.addEventListener('click', function() {
  li_btn.style.display = 'inline-flex'
});
<nav class="menu_links">
  <div class="sun">
    <i class="fa-sharp fa-solid fa-sun"></i>
  </div>
  <ul class="li_btn">
    <li><a href="#">главная</a></li>
    <li><a href="#">практика js</a></li>
  </ul>
  <div class="btn">
    <i class="fa-solid fa-bars"></i>
  </div>
</nav>

****

这张图中，代码已经写好了，就是点击有3条条纹的按钮，就会出现导航菜单。

如何让再次按下菜单时菜单再次消失？

javascript