点击下拉菜单时更改图标。

huangapple
go评论120阅读模式
英文:

Change the icon when clicked on the dropdown

问题

我想要更改图标，即根据下拉菜单是关闭还是打开来更改箭头。当下拉菜单关闭时，我希望箭头朝下，当它打开时，我希望箭头朝上。由于我有多个下拉菜单，我想要在JavaScript中编写此操作。

  1. const dropdownBtn = document.querySelectorAll('.b-footerMobile__item');
  2. const dropdown = document.querySelectorAll('.b-footerMobile__dropdown');
  3. const up = document.querySelectorAll('.b-footerMobile__up');
  4. const down = document.querySelectorAll('.b-footerMobile__down');
  6. dropdownBtn.forEach((btn) => {
  7.     btn.addEventListener('click', (e) => {
  8.         const target = e.currentTarget.dataset.dropdown;
  9.         const current = document.getElementById(target);
  10.         const upArrow = current.querySelector('.b-footerMobile__up');
  11.         const downArrow = current.querySelector('.b-footerMobile__down');
  13.         current.classList.toggle('active');
  14.         dropdown.forEach((drop) => {
  15.             if (drop.id !== target) {
  16.                 drop.classList.remove('active');
  17.             }
  18.         });
  20.         if (current.classList.contains('active')) {
  21.             upArrow.style.display = 'block';
  22.             downArrow.style.display = 'none';
  23.         } else {
  24.             upArrow.style.display = 'none';
  25.             downArrow.style.display = 'block';
  26.         }
  27.     });
  28. });

这段代码将根据下拉菜单的状态来切换箭头的显示。当下拉菜单打开时，箭头朝上显示，关闭时箭头朝下显示。希望这可以帮助你解决问题。

英文:

I want to change the icon, i.e. change the arrow depending if the dropdown is closed or not. When the dropdown is closed, I want the arrow to be down and when it is open, I want the arrow to be up. How do I fix this because I have multiple dropdowns?

I would like that operation to be written in JavaScript.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const dropdownBtn = document.querySelectorAll(&#39;.b-footerMobile__item&#39;);
  2. const dropdown = document.querySelectorAll(&#39;.b-footerMobile__dropdown&#39;);
  3. const up = document.querySelectorAll(&#39;.b-footerMobile__up&#39;);
  4. const down = document.querySelectorAll(&#39;.b-footerMobile__down&#39;);
  7. dropdownBtn.forEach((btn)=&gt;{
  8.     btn.addEventListener(&#39;click&#39;,(e) =&gt;{
  9.         const target = e.currentTarget.dataset.dropdown;
  10.         const current = document.getElementById(target);
  12.         current.classList.toggle(&#39;active&#39;);
  13.         dropdown.forEach((drop) =&gt;{
  14.             if(drop.id !== target){
  15.                 drop.classList.remove(&#39;active&#39;);
  16.             }
  17.         });
  18.     })
  19. })

<!-- language: lang-css -->

  1. .b-footerMobile__dropdown {
  2.   display: none;
  3. }
  4. .b-footerMobile__dropdown.active {
  5.   display: flex;
  6.   flex-direction: column;
  7.   align-items: center;
  8.   background-color: #414141;
  9.   width: 100%;
  10.   padding: 1px 0;
  11.   height: 90%;
  12. }
  13. .b-footerMobile__up {
  14.   display: none;
  15. }
  16. .b-footerMobile__up.active {
  17.   display: block;
  18. }
  19. .b-footerMobile__down {
  20.   display: block;
  21. }
  22. .b-footerMobile__down.active {
  23.   display: none;
  24. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;b-footerMobile__menu&quot;&gt;
  2.     &lt;div class=&quot;b-footerMobile__item&quot; data-dropdown=&quot;dropdown1&quot;&gt;
  3.         &lt;h2 class=&quot;b-footerMobile__title&quot;&gt;Drop1&lt;/h2&gt;
  4.         &lt;div class=&quot;bla&quot;&gt;
  5.             &lt;img src=&quot;./images/arrow-down-mobile.svg&quot; alt=&quot;arrow-down&quot;
  6.                 class=&quot;b-footerMobile__arrow b-footerMobile__down&quot;&gt;
  7.             &lt;img src=&quot;./images/arrow-up-mobile.svg&quot; alt=&quot;arrow-down&quot;
  8.                 class=&quot;b-footerMobile__arrow b-footerMobile__up&quot;&gt;
  9.         &lt;/div&gt;
  10.     &lt;/div&gt;
  11.     &lt;div class=&quot;b-footerMobile__dropdown&quot; id=&quot;dropdown1&quot;&gt;
  12.         &lt;div class=&quot;b-footerMobile__li&quot;&gt;
  13.             &lt;p class=&quot;b-footer__p&quot;&gt;1&lt;/p&gt;
  14.         &lt;/div&gt;
  15.         &lt;div class=&quot;b-footerMobile__li&quot;&gt;
  16.             &lt;p class=&quot;b-footer__p&quot;&gt;2&lt;/p&gt;
  17.         &lt;/div&gt;
  18.         &lt;div class=&quot;b-footerMobile__li&quot;&gt;
  19.             &lt;p class=&quot;b-footer__p&quot;&gt;3&lt;/p&gt;
  20.         &lt;/div&gt;
  21.     &lt;/div&gt;
  22. &lt;/div&gt;
  24. &lt;div class=&quot;b-footerMobile__item&quot; data-dropdown=&quot;dropdown2&quot;&gt;
  25.     &lt;h2 class=&quot;b-footerMobile__title&quot;&gt;Drop2&lt;/h2&gt;
  26.     &lt;div class=&quot;bla&quot;&gt;
  27.         &lt;img src=&quot;./images/arrow-down-mobile.svg&quot; alt=&quot;arrow-down&quot;
  28.             class=&quot;b-footerMobile__arrow b-footerMobile__down&quot;&gt;
  29.         &lt;img src=&quot;./images/arrow-up-mobile.svg&quot; alt=&quot;arrow-down&quot;
  30.             class=&quot;b-footerMobile__arrow b-footerMobile__up&quot;&gt;
  31.         &lt;/div&gt;
  32.     &lt;/div&gt;
  33.     &lt;div class=&quot;b-footerMobile__dropdown&quot; id=&quot;dropdown2&quot;&gt;
  34.         &lt;div class=&quot;b-footerMobile__li&quot;&gt;
  35.             &lt;p class=&quot;b-footer__p&quot;&gt;1&lt;/p&gt;
  36.         &lt;/div&gt;
  37.         &lt;div class=&quot;b-footerMobile__li&quot;&gt;
  38.             &lt;p class=&quot;b-footer__p&quot;&gt;2&lt;/p&gt;
  39.         &lt;/div&gt;
  40.         &lt;div class=&quot;b-footerMobile__li&quot;&gt;
  41.             &lt;p class=&quot;b-footer__p&quot;&gt;3&lt;/p&gt;
  42.         &lt;/div&gt;
  43.                           
  44.     &lt;/div&gt;
  45. &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

以下是您要翻译的代码部分：

  1. const dropdownBtn = document.querySelectorAll('.b-footerMobile__item');
  2. const dropdown = document.querySelectorAll('.b-footerMobile__dropdown');
  3. const up = document.querySelectorAll('.b-footerMobile__up');
  4. const down = document.querySelectorAll('.b-footerMobile__down');
  6. dropdownBtn.forEach((btn) => {
  7.   btn.addEventListener('click', (e) => {
  8.     const target = e.currentTarget.dataset.dropdown;
  9.     const current = document.getElementById(target);
  11.     e.currentTarget.querySelector('.bla').classList.toggle('active');
  13.     current.classList.toggle('active');
  14.     dropdown.forEach((drop) => {
  15.       if (drop.id !== target) {
  16.         drop.classList.remove('active');
  17.       }
  18.     });
  19.   });
  20. });
  1. .b-footerMobile__dropdown {
  2.   display: none;
  3. }
  4. .b-footerMobile__dropdown.active {
  5.   display: flex;
  6.   flex-direction: column;
  7.   align-items: center;
  8.   background-color: #414141;
  9.   width: 100%;
  10.   padding: 1px 0;
  11.   height: 90%;
  12. }
  14. .b-footerMobile__up {
  15.   display: none;
  16. }
  18. .b-footerMobile__up.active {
  19.   display: block;
  20. }
  22. .b-footerMobile__down {
  23.   display: block;
  24. }
  25. .b-footerMobile__up {
  26.   display: none;
  27. }
  28. .active .b-footerMobile__down {
  29.   display: none;
  30. }
  31. .active .b-footerMobile__up {
  32.   display: block;
  33. }
  1. <div class="b-footerMobile__item" data-dropdown="dropdown1">
  2.   <h2 class="b-footerMobile__title">Drop1</h2>
  3.   <div class="bla">
  4.     <img src="./images/arrow-down-mobile.svg" alt="arrow-down" class="b-footerMobile__arrow b-footerMobile__down">
  5.     <img src="./images/arrow-up-mobile.svg" alt="arrow-up" class="b-footerMobile__arrow b-footerMobile__up">
  6.   </div>
  7. </div>
  8. <div class="b-footerMobile__dropdown" id="dropdown1">
  9.   <div class="b-footerMobile__li">
  10.     <p class="b-footer__p">1</p>
  11.   </div>
  12.   <div class="b-footerMobile__li">
  13.     <p class="b-footer__p">2</p>
  14.   </div>
  15.   <div class="b-footerMobile__li">
  16.     <p class="b-footer__p">3</p>
  17.   </div>
  18. </div>
  19. <div class="b-footerMobile__item" data-dropdown="dropdown2">
  20.   <h2 class="b-footerMobile__title">Drop2</h2>
  21.   <div class="bla">
  22.     <img src="./images/arrow-down-mobile.svg" alt="arrow-down" class="b-footerMobile__arrow b-footerMobile__down">
  23.     <img src="./images/arrow-up-mobile.svg" alt="arrow-up" class="b-footerMobile__arrow b-footerMobile__up">
  24.   </div>
  25. </div>
  26. <div class="b-footerMobile__dropdown" id="dropdown2">
  27.   <div class="b-footerMobile__li">
  28.     <p class="b-footer__p">1</p>
  29.   </div>
  30.   <div class="b-footerMobile__li">
  31.     <p class="b-footer__p">2</p>
  32.   </div>
  33.   <div class="b-footerMobile__li">
  34.     <p class="b-footer__p">3</p>
  35.   </div>
  36. </div>
英文:

As far as I understand, you want to do something like this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const dropdownBtn = document.querySelectorAll(&#39;.b-footerMobile__item&#39;);
  2. const dropdown = document.querySelectorAll(&#39;.b-footerMobile__dropdown&#39;);
  3. const up = document.querySelectorAll(&#39;.b-footerMobile__up&#39;);
  4. const down = document.querySelectorAll(&#39;.b-footerMobile__down&#39;);
  5. dropdownBtn.forEach((btn) =&gt; {
  6. btn.addEventListener(&#39;click&#39;, (e) =&gt; {
  7. const target = e.currentTarget.dataset.dropdown;
  8. const current = document.getElementById(target);
  9. e.currentTarget.querySelector(&#39;.bla&#39;).classList.toggle(&#39;active&#39;);
  10. current.classList.toggle(&#39;active&#39;);
  11. dropdown.forEach((drop) =&gt; {
  12. if (drop.id !== target) {
  13. drop.classList.remove(&#39;active&#39;);
  14. }
  15. });
  16. })
  17. })

<!-- language: lang-css -->

  1. .b-footerMobile__dropdown {
  2. display: none;
  3. }
  4. .b-footerMobile__dropdown.active {
  5. display: flex;
  6. flex-direction: column;
  7. align-items: center;
  8. background-color: #414141;
  9. width: 100%;
  10. padding: 1px 0;
  11. height: 90%;
  12. }
  13. .b-footerMobile__up {
  14. display: none;
  15. }
  16. .b-footerMobile__up.active {
  17. display: block;
  18. }
  19. .b-footerMobile__down {
  20. display: block;
  21. }
  22. .b-footerMobile__up {
  23. display: none;
  24. }
  25. .active .b-footerMobile__down {
  26. display: none;
  27. }
  28. .active .b-footerMobile__up {
  29. display: block;
  30. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;b-footerMobile__item&quot; data-dropdown=&quot;dropdown1&quot;&gt;
  2. &lt;h2 class=&quot;b-footerMobile__title&quot;&gt;Drop1&lt;/h2&gt;
  3. &lt;div class=&quot;bla&quot;&gt;
  4. &lt;img src=&quot;./images/arrow-down-mobile.svg&quot; alt=&quot;arrow-down&quot; class=&quot;b-footerMobile__arrow b-footerMobile__down&quot;&gt;
  5. &lt;img src=&quot;./images/arrow-up-mobile.svg&quot; alt=&quot;arrow-up&quot; class=&quot;b-footerMobile__arrow b-footerMobile__up&quot;&gt;
  6. &lt;/div&gt;
  7. &lt;/div&gt;
  8. &lt;div class=&quot;b-footerMobile__dropdown&quot; id=&quot;dropdown1&quot;&gt;
  9. &lt;div class=&quot;b-footerMobile__li&quot;&gt;
  10. &lt;p class=&quot;b-footer__p&quot;&gt;1&lt;/p&gt;
  11. &lt;/div&gt;
  12. &lt;div class=&quot;b-footerMobile__li&quot;&gt;
  13. &lt;p class=&quot;b-footer__p&quot;&gt;2&lt;/p&gt;
  14. &lt;/div&gt;
  15. &lt;div class=&quot;b-footerMobile__li&quot;&gt;
  16. &lt;p class=&quot;b-footer__p&quot;&gt;3&lt;/p&gt;
  17. &lt;/div&gt;
  18. &lt;/div&gt;
  19. &lt;div class=&quot;b-footerMobile__item&quot; data-dropdown=&quot;dropdown2&quot;&gt;
  20. &lt;h2 class=&quot;b-footerMobile__title&quot;&gt;Drop2&lt;/h2&gt;
  21. &lt;div class=&quot;bla&quot;&gt;
  22. &lt;img src=&quot;./images/arrow-down-mobile.svg&quot; alt=&quot;arrow-down&quot; class=&quot;b-footerMobile__arrow b-footerMobile__down&quot;&gt;
  23. &lt;img src=&quot;./images/arrow-up-mobile.svg&quot; alt=&quot;arrow-up&quot; class=&quot;b-footerMobile__arrow b-footerMobile__up&quot;&gt;
  24. &lt;/div&gt;
  25. &lt;/div&gt;
  26. &lt;div class=&quot;b-footerMobile__dropdown&quot; id=&quot;dropdown2&quot;&gt;
  27. &lt;div class=&quot;b-footerMobile__li&quot;&gt;
  28. &lt;p class=&quot;b-footer__p&quot;&gt;1&lt;/p&gt;
  29. &lt;/div&gt;
  30. &lt;div class=&quot;b-footerMobile__li&quot;&gt;
  31. &lt;p class=&quot;b-footer__p&quot;&gt;2&lt;/p&gt;
  32. &lt;/div&gt;
  33. &lt;div class=&quot;b-footerMobile__li&quot;&gt;
  34. &lt;p class=&quot;b-footer__p&quot;&gt;3&lt;/p&gt;
  35. &lt;/div&gt;
  36. &lt;/div&gt;

<!-- end snippet -->

答案2

得分: 0

下拉菜单的使用方式在语义上不正确。

我建议您在HTML结构中使用<select>元素。

然后，您可以使用MDN上提供的示例来样式化该<select>元素：

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/select#examples

英文:

The dropdown used here is not semantically correct.

I would recommend that you use a &lt;select&gt; element for your HTML structure.

Then you can style that &lt;select&gt; using the examples given here on MDN:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#examples

huangapple
  • 本文由 发表于 2023年8月10日 20:59:48
  • 转载请务必保留本文链接：https://go.coder-hub.com/76875959.html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定