我有一个小问题与一些JS.

目前,我有一个按钮类'mobilecollapsible',当点击它时它会打开一个div' mobilecollapsiblcontent '.当你点击按钮时,它可以打开和关闭.div包含一个链接列表.

但是,我希望div关闭时,它的任何链接被关闭.

以下是相关代码:

JS:

var coll = document.getElementsByClassName("mobilecollapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var mobilecollapsiblecontent = this.nextElementSibling;
    if (mobilecollapsiblecontent.style.display === "block") {
      mobilecollapsiblecontent.style.display = "none";
    } else {
      mobilecollapsiblecontent.style.display = "block";
    }
  });
}
<button type="button" class="mobilecollapsible"><strong>Filter by Options: <strong class="plussign">+</strong></strong></button>
<div class="mobilecollapsiblecontent">
 <ul class="ul-transactionfilterlist">
  <li class="li-transactionfilterlist"><button class="galleryfilterbutton" data-filter="all"><strong>All</strong></button></li>
  <li class="li-transactionfilterlist"><button class="galleryfilterbutton" data-filter="option1">Option1</button></li>
  <li class="li-transactionfilterlist"><button class="galleryfilterbutton" data-filter="option2">Option2</button></li>
  <li class="li-transactionfilterlist"><button class="galleryfilterbutton" data-filter="option3">Option3</button></li>
 </ul>
</div>

我是一个白痴,当涉及到JS,所以我不知道在哪里修改这个代码.

推荐答案

将点击事件侦听器添加到关闭它的内容分区中.

我还将原来的事件侦听器更改为使用getComputedStyle()..style属性只返回内联样式,而不是来自CSS的样式,这就是为什么它在第一次点击时不起作用.

var coll = document.getElementsByClassName("mobilecollapsible");

for (let i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var mobilecollapsiblecontent = this.nextElementSibling;
    if (getComputedStyle(mobilecollapsiblecontent).getPropertyValue("display") === "block") {
      mobilecollapsiblecontent.style.display = "none";
    } else {
      mobilecollapsiblecontent.style.display = "block";
    }
  });
}

let content = document.querySelectorAll(".mobilecollapsiblecontent");

content.forEach(el => el.addEventListener("click", () => el.style.display = "none"));
<button type="button" class="mobilecollapsible"><strong>Filter by Options: <strong class="plussign">+</strong></strong></button>
<div class="mobilecollapsiblecontent">
  <ul class="ul-transactionfilterlist">
    <li class="li-transactionfilterlist"><button class="galleryfilterbutton" data-filter="all"><strong>All</strong></button></li>
    <li class="li-transactionfilterlist"><button class="galleryfilterbutton" data-filter="option1">Option1</button></li>
    <li class="li-transactionfilterlist"><button class="galleryfilterbutton" data-filter="option2">Option2</button></li>
    <li class="li-transactionfilterlist"><button class="galleryfilterbutton" data-filter="option3">Option3</button></li>
  </ul>
</div>

Javascript相关问答推荐

在JS中获取名字和姓氏的首字母

是否有方法在OpenWeatherMap API中获取过go 的降水数据?

TypeScript索引签名模板限制

配置WebAssembly/Emscripten本地生成问题

如何在JavaScript文件中使用Json文件

并不是所有的iframe都被更换

使用GraphQL查询Uniswap的ETH价格

我创建了一个创建对象的函数,我希望从该函数创建的对象具有唯一的键.我怎么能做到这一点?

在forEach循环中获取目标而不是父对象的属性

对路由DOM嵌套路由作出react

如何创建返回不带`new`关键字的实例的类

有条件重定向到移动子域

Use Location位置成员在HashRouter内为空

将Node.js包发布到GitHub包-错误ENEEDAUTH

如果没有页面重新加载Angular ,innerHTML属性绑定不会更新

try 将Redux工具包与MUI ToggleButtonGroup组件一起使用时出错

如何使本地html页面在重新加载时保持当前可隐藏部分的打开状态?

使用线性插值法旋转直线以查看鼠标会导致 skip

Promise.race()返回已解析的promise ,而不是第一个被拒绝的promise

使用props 将VUE 3组件导入JS文件