第二个 Instagram 按钮的 CSS 属性

Question

powerg

Asked:2023-02-11 15:12:43 +0000 UTC2023-02-11 15:12:43 +0000 UTC 2023-02-11 15:12:43 +0000 UTC

如何在页面上进行多项选择？

772

你能告诉我如何在页面上进行多个选择吗？如果一个是开放的，其他的是关闭的？我是js的新手。非常感谢您的帮助 https://codepen.io/ladyelizaveta/pen/JjBgEML

function selectProductCard() {
    const optionMenu = document.querySelector('.select__menu');
    const selectBtn = document.querySelector('.select__btn');
    const options = document.querySelectorAll('.select__option');
    const sBtntext = document.querySelector('.select__btntext');
    if (optionMenu) {
        selectBtn.addEventListener("click", function (e) {
            optionMenu.classList.toggle("_active")
        });
        options.forEach(option => {
            option.addEventListener("click", function (e) {
                if (document.querySelector('.select__option-text') != null) {
                    const selectedOption = option.querySelector('.select__option-text-title').innerText + option.querySelector('.select__option-text-tochka').innerText + option.querySelector('.select__option-text-subtitle').innerText;
                    sBtntext.innerText = selectedOption;
                };

                optionMenu.classList.remove("_active")
            });
        });
    }
}

window.addEventListener("DOMContentLoaded", function (e) {
    selectProductCard()
    
});

.select__menu{
  position: relative;
        padding: 12px 12px 12px 16px;
        border: 1px solid #ebe6e1;
        cursor: pointer;
        width: 100%;
        height: 20px;
        border-radius: 4px;
        display: block;
        background-color: rgba(168, 149, 131, 0.04);
        transition: all 0.5s ease 0s;
  margin-bottom: 100px;
}

.select__menu ul{
  list-style: none;
}

.select__menu._active .select__options {
  display: block;
}

.select__options {
  z-index: 100;
        position: absolute;
        top: 30px;
        min-width: 100%;
        left: 0;
        max-height: 400px;
        background-color: #fff;
        border-radius: 4px;
  background: red;
        box-shadow: 0 2px 8px rgb(31 27 22 / 8%);
        padding: 8px;
  display: none;
}

<div class="select__menu">
  <div class="select__btn">
    <span class="select__btntext">
      35
    </span>
  </div>
  <ul class="select__options">
    <li class="select__option">
      <span class="select__option-text">
        <span class="select__option-text-title">35</span>
        <span class="select__option-text-tochka"></span>
        <span class="select__option-text-subtitle"></span>
      </span>
    </li>
    <li class="select__option">
      <span class="select__option-text">
        <span class="select__option-text-title">36</span>
        <span class="select__option-text-tochka"></span>
        <span class="select__option-text-subtitle"></span>
      </span>
    </li>
  </ul>
</div>

<div class="select__menu">
  <div class="select__btn">
    <span class="select__btntext">
      35
    </span>
  </div>
  <ul class="select__options">
    <li class="select__option">
      <span class="select__option-text">
        <span class="select__option-text-title">35</span>
        <span class="select__option-text-tochka"></span>
        <span class="select__option-text-subtitle"></span>
      </span>
    </li>
    <li class="select__option">
      <span class="select__option-text">
        <span class="select__option-text-title">36</span>
        <span class="select__option-text-tochka"></span>
        <span class="select__option-text-subtitle"></span>
      </span>
    </li>
  </ul>
</div>

1 个回答

Voted

ΝNL993 · Answer 1 · 2023-02-11T20:45:16Z

容易地：

function selectProductCard() {
    const optionMenus = document.querySelectorAll('.select__menu');

    optionMenus.forEach(optionMenu => {
        const selectBtn = optionMenu.querySelector('.select__btn');
        const options = optionMenu.querySelectorAll('.select__option');
        const sBtntext = optionMenu.querySelector('.select__btntext');

        if (optionMenu) {
            selectBtn.addEventListener("click", function (e) {
                optionMenu.classList.toggle("_active")
            });
            options.forEach(option => {
                option.addEventListener("click", function (e) {
                    if (document.querySelector('.select__option-text') != null) {
                        const selectedOption = option.querySelector('.select__option-text-title').innerText + option.querySelector('.select__option-text-tochka').innerText + option.querySelector('.select__option-text-subtitle').innerText;
                        sBtntext.innerText = selectedOption;
                    };

                    optionMenu.classList.remove("_active")
                });
            });
        }
    })
}

window.addEventListener("DOMContentLoaded", selectProductCard);

.select__menu{
  position: relative;
        padding: 12px 12px 12px 16px;
        border: 1px solid #ebe6e1;
        cursor: pointer;
        width: 100%;
        height: 20px;
        border-radius: 4px;
        display: block;
        background-color: rgba(168, 149, 131, 0.04);
        transition: all 0.5s ease 0s;
  margin-bottom: 100px;
}

.select__menu ul{
  list-style: none;
}

.select__menu._active .select__options {
  display: block;
}

.select__options {
  z-index: 100;
        position: absolute;
        top: 30px;
        min-width: 100%;
        left: 0;
        max-height: 400px;
        background-color: #fff;
        border-radius: 4px;
  background: red;
        box-shadow: 0 2px 8px rgb(31 27 22 / 8%);
        padding: 8px;
  display: none;
}

<div class="select__menu">
  <div class="select__btn">
    <span class="select__btntext">
      35
    </span>
  </div>
  <ul class="select__options">
    <li class="select__option">
      <span class="select__option-text">
        <span class="select__option-text-title">35</span>
        <span class="select__option-text-tochka"></span>
        <span class="select__option-text-subtitle"></span>
      </span>
    </li>
    <li class="select__option">
      <span class="select__option-text">
        <span class="select__option-text-title">36</span>
        <span class="select__option-text-tochka"></span>
        <span class="select__option-text-subtitle"></span>
      </span>
    </li>
  </ul>
</div>

<div class="select__menu">
  <div class="select__btn">
    <span class="select__btntext">
      35
    </span>
  </div>
  <ul class="select__options">
    <li class="select__option">
      <span class="select__option-text">
        <span class="select__option-text-title">35</span>
        <span class="select__option-text-tochka"></span>
        <span class="select__option-text-subtitle"></span>
      </span>
    </li>
    <li class="select__option">
      <span class="select__option-text">
        <span class="select__option-text-title">36</span>
        <span class="select__option-text-tochka"></span>
        <span class="select__option-text-subtitle"></span>
      </span>
    </li>
  </ul>
</div>

解释

首先，我们将所有菜单保存到一个变量中，然后我们遍历它们，但是在我们指定元素的其他变量中，我们需要写 not ，document但是optionMenu（这是一个迭代器，你可以注意到它是箭头中的参数方法中的函数forEach）。这是必要的，这样代码才能专门用于特定菜单，而不是文档中的第一个元素。

PS 我在脚本末尾更改了您的条目。（是的你可以）

如何在页面上进行多项选择？

解释

我看不懂措辞

请求的模块“del”不提供名为“default”的导出

"!+tab" 在 HTML 的 vs 代码中不起作用

我正在尝试解决“猜词”的问题。Python

可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件？

Python解析野莓

问题：“警告：检查最新版本的 pip 时出错。”

帮助编写一个用值填充变量的循环。解决这个问题

尽管依赖数组为空，但在渲染上调用了 2 次 useEffect

数据不通过 Telegram.WebApp.sendData 发送

如何在页面上进行多项选择？

1 个回答

解释

相关问题