2023年8月10日 20:59:48go评论180阅读模式

英文:

Change the icon when clicked on the dropdown

问题

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

const dropdownBtn = document.querySelectorAll('.b-footerMobile__item');
const dropdown = document.querySelectorAll('.b-footerMobile__dropdown');
const up = document.querySelectorAll('.b-footerMobile__up');
const down = document.querySelectorAll('.b-footerMobile__down');

dropdownBtn.forEach((btn) => {
    btn.addEventListener('click', (e) => {
        const target = e.currentTarget.dataset.dropdown;
        const current = document.getElementById(target);
        const upArrow = current.querySelector('.b-footerMobile__up');
        const downArrow = current.querySelector('.b-footerMobile__down');

        current.classList.toggle('active');
        dropdown.forEach((drop) => {
            if (drop.id !== target) {
                drop.classList.remove('active');
            }
        });

        if (current.classList.contains('active')) {
            upArrow.style.display = 'block';
            downArrow.style.display = 'none';
        } else {
            upArrow.style.display = 'none';
            downArrow.style.display = 'block';
        }
    });
});

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

英文:

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.

const dropdownBtn = document.querySelectorAll(&#39;.b-footerMobile__item&#39;);
const dropdown = document.querySelectorAll(&#39;.b-footerMobile__dropdown&#39;);
const up = document.querySelectorAll(&#39;.b-footerMobile__up&#39;);
const down = document.querySelectorAll(&#39;.b-footerMobile__down&#39;);


dropdownBtn.forEach((btn)=&gt;{
    btn.addEventListener(&#39;click&#39;,(e) =&gt;{
        const target = e.currentTarget.dataset.dropdown;
        const current = document.getElementById(target);

        current.classList.toggle(&#39;active&#39;);
        dropdown.forEach((drop) =&gt;{
            if(drop.id !== target){
                drop.classList.remove(&#39;active&#39;);
            }
        });
    })
})

.b-footerMobile__dropdown {
  display: none;
}
.b-footerMobile__dropdown.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #414141;
  width: 100%;
  padding: 1px 0;
  height: 90%;
}
.b-footerMobile__up {
  display: none;
}
.b-footerMobile__up.active {
  display: block;
}
.b-footerMobile__down {
  display: block;
}
.b-footerMobile__down.active {
  display: none;
}

&lt;div class=&quot;b-footerMobile__menu&quot;&gt;
    &lt;div class=&quot;b-footerMobile__item&quot; data-dropdown=&quot;dropdown1&quot;&gt;
        &lt;h2 class=&quot;b-footerMobile__title&quot;&gt;Drop1&lt;/h2&gt;
        &lt;div class=&quot;bla&quot;&gt;
            &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;
            &lt;img src=&quot;./images/arrow-up-mobile.svg&quot; alt=&quot;arrow-down&quot;
                class=&quot;b-footerMobile__arrow b-footerMobile__up&quot;&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;b-footerMobile__dropdown&quot; id=&quot;dropdown1&quot;&gt;
        &lt;div class=&quot;b-footerMobile__li&quot;&gt;
            &lt;p class=&quot;b-footer__p&quot;&gt;1&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;b-footerMobile__li&quot;&gt;
            &lt;p class=&quot;b-footer__p&quot;&gt;2&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;b-footerMobile__li&quot;&gt;
            &lt;p class=&quot;b-footer__p&quot;&gt;3&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;b-footerMobile__item&quot; data-dropdown=&quot;dropdown2&quot;&gt;
    &lt;h2 class=&quot;b-footerMobile__title&quot;&gt;Drop2&lt;/h2&gt;
    &lt;div class=&quot;bla&quot;&gt;
        &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;
        &lt;img src=&quot;./images/arrow-up-mobile.svg&quot; alt=&quot;arrow-down&quot;
            class=&quot;b-footerMobile__arrow b-footerMobile__up&quot;&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;b-footerMobile__dropdown&quot; id=&quot;dropdown2&quot;&gt;
        &lt;div class=&quot;b-footerMobile__li&quot;&gt;
            &lt;p class=&quot;b-footer__p&quot;&gt;1&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;b-footerMobile__li&quot;&gt;
            &lt;p class=&quot;b-footer__p&quot;&gt;2&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;b-footerMobile__li&quot;&gt;
            &lt;p class=&quot;b-footer__p&quot;&gt;3&lt;/p&gt;
        &lt;/div&gt;
                          
    &lt;/div&gt;
&lt;/div&gt;

答案1

得分: 1

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

const dropdownBtn = document.querySelectorAll('.b-footerMobile__item');
const dropdown = document.querySelectorAll('.b-footerMobile__dropdown');
const up = document.querySelectorAll('.b-footerMobile__up');
const down = document.querySelectorAll('.b-footerMobile__down');

dropdownBtn.forEach((btn) => {
  btn.addEventListener('click', (e) => {
    const target = e.currentTarget.dataset.dropdown;
    const current = document.getElementById(target);

    e.currentTarget.querySelector('.bla').classList.toggle('active');

    current.classList.toggle('active');
    dropdown.forEach((drop) => {
      if (drop.id !== target) {
        drop.classList.remove('active');
      }
    });
  });
});

.b-footerMobile__dropdown {
  display: none;
}
.b-footerMobile__dropdown.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #414141;
  width: 100%;
  padding: 1px 0;
  height: 90%;
}

.b-footerMobile__up {
  display: none;
}

.b-footerMobile__up.active {
  display: block;
}

.b-footerMobile__down {
  display: block;
}
.b-footerMobile__up {
  display: none;
}
.active .b-footerMobile__down {
  display: none;
}
.active .b-footerMobile__up {
  display: block;
}

<div class="b-footerMobile__item" data-dropdown="dropdown1">
  <h2 class="b-footerMobile__title">Drop1</h2>
  <div class="bla">
    <img src="./images/arrow-down-mobile.svg" alt="arrow-down" class="b-footerMobile__arrow b-footerMobile__down">
    <img src="./images/arrow-up-mobile.svg" alt="arrow-up" class="b-footerMobile__arrow b-footerMobile__up">
  </div>
</div>
<div class="b-footerMobile__dropdown" id="dropdown1">
  <div class="b-footerMobile__li">
    <p class="b-footer__p">1</p>
  </div>
  <div class="b-footerMobile__li">
    <p class="b-footer__p">2</p>
  </div>
  <div class="b-footerMobile__li">
    <p class="b-footer__p">3</p>
  </div>
</div>
<div class="b-footerMobile__item" data-dropdown="dropdown2">
  <h2 class="b-footerMobile__title">Drop2</h2>
  <div class="bla">
    <img src="./images/arrow-down-mobile.svg" alt="arrow-down" class="b-footerMobile__arrow b-footerMobile__down">
    <img src="./images/arrow-up-mobile.svg" alt="arrow-up" class="b-footerMobile__arrow b-footerMobile__up">
  </div>
</div>
<div class="b-footerMobile__dropdown" id="dropdown2">
  <div class="b-footerMobile__li">
    <p class="b-footer__p">1</p>
  </div>
  <div class="b-footerMobile__li">
    <p class="b-footer__p">2</p>
  </div>
  <div class="b-footerMobile__li">
    <p class="b-footer__p">3</p>
  </div>
</div>

英文:

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

const dropdownBtn = document.querySelectorAll(&#39;.b-footerMobile__item&#39;);
const dropdown = document.querySelectorAll(&#39;.b-footerMobile__dropdown&#39;);
const up = document.querySelectorAll(&#39;.b-footerMobile__up&#39;);
const down = document.querySelectorAll(&#39;.b-footerMobile__down&#39;);
dropdownBtn.forEach((btn) =&gt; {
btn.addEventListener(&#39;click&#39;, (e) =&gt; {
const target = e.currentTarget.dataset.dropdown;
const current = document.getElementById(target);
e.currentTarget.querySelector(&#39;.bla&#39;).classList.toggle(&#39;active&#39;);
current.classList.toggle(&#39;active&#39;);
dropdown.forEach((drop) =&gt; {
if (drop.id !== target) {
drop.classList.remove(&#39;active&#39;);
}
});
})
})

.b-footerMobile__dropdown {
display: none;
}
.b-footerMobile__dropdown.active {
display: flex;
flex-direction: column;
align-items: center;
background-color: #414141;
width: 100%;
padding: 1px 0;
height: 90%;
}
.b-footerMobile__up {
display: none;
}
.b-footerMobile__up.active {
display: block;
}
.b-footerMobile__down {
display: block;
}
.b-footerMobile__up {
display: none;
}
.active .b-footerMobile__down {
display: none;
}
.active .b-footerMobile__up {
display: block;
}

&lt;div class=&quot;b-footerMobile__item&quot; data-dropdown=&quot;dropdown1&quot;&gt;
&lt;h2 class=&quot;b-footerMobile__title&quot;&gt;Drop1&lt;/h2&gt;
&lt;div class=&quot;bla&quot;&gt;
&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;
&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;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;b-footerMobile__dropdown&quot; id=&quot;dropdown1&quot;&gt;
&lt;div class=&quot;b-footerMobile__li&quot;&gt;
&lt;p class=&quot;b-footer__p&quot;&gt;1&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;b-footerMobile__li&quot;&gt;
&lt;p class=&quot;b-footer__p&quot;&gt;2&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;b-footerMobile__li&quot;&gt;
&lt;p class=&quot;b-footer__p&quot;&gt;3&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;b-footerMobile__item&quot; data-dropdown=&quot;dropdown2&quot;&gt;
&lt;h2 class=&quot;b-footerMobile__title&quot;&gt;Drop2&lt;/h2&gt;
&lt;div class=&quot;bla&quot;&gt;
&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;
&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;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;b-footerMobile__dropdown&quot; id=&quot;dropdown2&quot;&gt;
&lt;div class=&quot;b-footerMobile__li&quot;&gt;
&lt;p class=&quot;b-footer__p&quot;&gt;1&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;b-footerMobile__li&quot;&gt;
&lt;p class=&quot;b-footer__p&quot;&gt;2&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;b-footerMobile__li&quot;&gt;
&lt;p class=&quot;b-footer__p&quot;&gt;3&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;

答案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 <select> element for your HTML structure.

Then you can style that <select> using the examples given here on MDN:

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

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

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

问题

答案1

答案2

如何判断点是否在椭圆内

Testing a void async method in Angular, the spec is not waiting for the async calls to complete, which is making the test always fail

调整 Ag Grid 中的特定列大小。

.includes方法在字符串上不会检测小写字母。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论