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

英文:

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

创建具有多选功能的下拉菜单，使用JS。

如何在 Playwright 中获取选择器上的 classList？

如何在服务器端/后台使用vb.net动态更改Jquery对话框上按钮上的文本？

如何在窗口较小时防止`div`重叠？

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 在上下文菜单中以大文本形式打开

发表评论