为什么当我按下一个<li>打开另一个</li> <li>内容时单击

Question

我有列表问题。每一个

都可以通过点击打开 - 我们会看到一个答案。如果我准确地按下问题的文本 - 一切都很好。但是，如果我在文本的侧面（或向下）按一下 - 每次打开拳头

。按下哪一个并不重要。我怎么解决这个问题？我想的不是风格。当我在旁边按

时，我的js无法找到属于这个

的答案。但我找不到确切的问题。

＆＃13;

＆＃13;

var questions = document.querySelectorAll('.question');
for (var i = 0; i < questions.length; i++) {
    var question = questions[i];
    question.addEventListener('click', function (event) {
                  
            
            var targetElement = event.target;

            var allAnswers = targetElement.parentNode.querySelectorAll('.answer');           
            if (allAnswers[0].style.display=="block"){
                allAnswers[0].style.display="none";
            }
            else { 
            allAnswers[0].style.display="block";
            }
            

            var allCaretsLeft = targetElement.parentNode.querySelectorAll('.icon-caret-left');
            if (allCaretsLeft[0].style.display=="none"){
                allCaretsLeft[0].style.display="block";
            }
            else { 
                allCaretsLeft[0].style.display="none";
            }
                
           

            var allCaretsDown = targetElement.parentNode.querySelectorAll('.icon-caret-down');
            if (allCaretsDown[0].style.display=="block"){
                allCaretsDown[0].style.display="none";
            }
            else { 
                allCaretsDown[0].style.display="block";
            }
    
            
        }
    
    );
}

＆＃13;

.popular-question{
    margin-top: 50px;
}
.popular-question ul li{     
    border-bottom: 2px solid #5dc5ef; 
    color: #5dc5ef;
    min-height: 30px;  
    position: relative;    
}
.popular-question ul li::before,.popular-question ul li::after{
    content:"";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.popular-question ul li:last-child{
    border-bottom:none;
}
.popular-question ul  h5,.popular-question ul  h6{    
    color: black;
    margin-right: 30px;
}
.icon-caret-down, .icon-caret-left{
    color: #5dc5ef;
    font-size: 1em;
}
.question .icon-caret-left{
    position: absolute;   
    top:50%; 
    margin-top: -0.5em;
}
.question{
    cursor: pointer;
}
.answer{
    display: none;
}
.icon-caret-down{
    display: none;
}

＆＃13;

        <div class="central-container">
            <div class="popular-question">
                <ul class="question-list" dir="rtl">

                    <!-- <ul dir="rtl"> -->
                    <li class="question">
                        <span class="icon-caret-left"></span>
                        <span class="icon-caret-down"></span>
                        
                            <h5>
                                איך מתקדמים אם עומדים בכל הקריטריונים לקיצור קיבה?

                            </h5>
                            <h6 class="answer ">
                                Hidden

                            </h6>
                        

                    </li>

                    <li class="question">
                        <span class="icon-caret-left"></span>
                        <span class="icon-caret-down "></span>
                        <h5>
                            איזה בדיקות מבצעים לקראת הניתוח?
                        </h5>
                        <h6 class="answer ">
                            <br> הברור הטרום ניתוחי כולל א.ק.ג., צילום חזה, בדיקות דם מקיפות, אולטרא-סאונד של הכבד וכיס המרה,
                            גסטרוסקופיה או
                            <br>.צילום בליעה, הערכת דיאטנית, הערכת פסיכיאטר/פסיכולוג/עו"ס ובדיקות נוספות על פי צרכי המטופל
                        </h6>
                    </li>
                    <li class="question">
                        <span class="icon-caret-left"></span>
                        <span class="icon-caret-down "></span>
                        <h5>
                            האם הניתוח מבטיח הגעה למשקל גוף תקין?
                        </h5>
                        <h6 class="answer ">
                            Hidden
                        </h6>
                    </li>
                    <li class="question">
                        <span class="icon-caret-left"></span>
                        <span class="icon-caret-down  "></span>
                        <h5>
                            מה משך האשפוז ומתי אפשר לחזור לפעילות?

                        </h5>
                        <h6 class="answer ">
                            <br>מרבית המנותחים משוחררים לביתם יומיים-שלושה לאחר הניתוח. כמובן שבמקרים מורכבים או במידה ומתפתחים
                            סיבוכים
                            <br>משך האשפוז מתארך. חזרה לפעילות הינה אינדיבידואלית אך לרוב תוך כשבועיים מרבית המנותחים חוזרים
                            לשגרת חייהם
                            <br>.למעט מאמצים גופניים
                        </h6>
                    </li>
                    <li class="question">
                        <span class="icon-caret-left"></span>
                        <span class="icon-caret-down "></span>
                        <h5>
                            אילו סיבוכים עלולים להתפתח בעקבות הניתוח?

                        </h5>
                        <h6 class="answer ">
                            Hidden
                        </h6>
                    </li>
                    <li class="question">
                        <span class="icon-caret-left"></span>
                        <span class="icon-caret-down "></span>
                        <h5>
                            האם השרוול מתרחב? האם התיאבון חוזר?
                        </h5>
                        <h6 class="answer ">
                            hidden

                        </h6>
                    </li>
                    <li class="question">
                        <span class="icon-caret-left"></span>
                        <span class="icon-caret-down "></span>
                        <h5>
                            האם ניתן לעבור ניתוח בריאטרי חוזר במקרה של סיבוכים
                            <br> ו/או עליה במשקל?

                        </h5>
                        <h6 class="answer ">
                            <br>כן, לרוב ניתן לבצע ניתוח בריאטרי חוזר - גם עקב סיבוכים וגם עקב כישלון. לקראת הניתוח החוזר יש
                            צורך לבצע הערכה
                            <br>מקיפה על מנת לזהות את סיבת הסיבוך/כישלון בכדי לדעת איזה ניתוח כדאי לבצע בכדי להימנע מאכזבה נוספת
                        </h6>
                    </li>
                </ul>

            </div>

          

   

＆＃13;

＆＃13;

＆＃13;

Answer 1

您总是在addEventListener中切换第一个项目或索引为[0]的项目