为什么当我按一个时单击 <li> 打开另一个 <li> 内容
[英]Why when I click when I press one <li> open another<li> content
问题描述
I have list questions. 
我有清单问题。 Each one 每一个
可以通过单击打开-我们将看到一个答案。如果我准确地按问题文本，则一切正常。 But if I press a bit on the side (or down) from a text - everytime open fist 但是，如果我在文本的侧面（或向下）按一点-每次打开拳头 。 Doesn't matter which one was pressed. 紧迫哪一个都没关系。 How can I solve this? 我该如何解决？ I thought than something with styles. 我认为比有样式的事。 That when I press 当我按 在一边我的js找不到属于这个的答案 。 But I can't find exactly the problem. 但是我找不到确切的问题。
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"; } } ); }
.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; }
<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>
1 个解决方案
解决方案1
0 2018-05-02 14:59:27
您总是在addEventListener中切换第一个项目或索引为[0]的项目
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
当点击第一个li时，它显示内容一，当点击第二个li时，它显示内容二 - when click on the first li, it show content one, when click on second li, it shows content two
当我点击li时为什么会触发ul？ - Why ul gets triggered when I click on li?
隐藏一个<li>当点击另一个<li> - Hide one <li> when clicking another <li>
单击父级li时如何设置下拉菜单列表打开，然后使用javascript打开子级li？ - How Do I set drop down menu list open when I click on parent li Then open the sub li using javascript?
我想要一个 <li> ，当单击时隐藏另一个 <li> 在相同的 <ul> - I would like one <li>, when clicked, to hide another <li> in the same <ul>
jQuery切换：单击另一个时关闭所有打开的li - jQuery toggle: Close all open li when another one is clicked
当点击 <li> 我什么时候不显示div并显示表一个div - When click on <li> I when display none div and display table one div
单击li时如何加载div？ - How can I load a div when I click on a li?
换一个背景 <li> 当悬停另一个 <li> - Change background of one <li> when hover another <li>
用户单击任何li.eq（i）时重新运行功能 - Rerun a function when user click on any li.eq(i)
相关标签