文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >将jquery转换为javascript - Converting

问将jquery转换为javascript - Converting
EN

Stack Overflow用户
提问于 2021-06-15 18:19:52
回答 1查看 63关注 0票数 0

我很难找到如何将下面的jquery脚本转换为javascript。HTML：

代码语言：javascript
复制
<ul class="accordion">
  <li>
    <a class="toggle" href="javascript:void(0);">Item 1</a>
    <ul class="inner">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </li>

  <li>
    <a class="toggle" href="javascript:void(0);">Item 2</a>
    <ul class="inner">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </li>

  <li>
    <a class="toggle" href="javascript:void(0);">Item 3</a>
    <ul class="inner">
      <li>
        <a href="#" class="toggle">Technically any number of nested elements</a>
        <ul class="inner">
          <li>
            <a href="#" class="toggle">Another nested element</a>
            <div class="inner">
              <p>
                As long as the inner element has inner as one of its classes then it will be toggled.
              </p>
            </div>
          </li>
        </ul>
      </li>

      <li>Option 2</li>

      <li>Option 3</li>
    </ul>
  </li>
</ul>

Jquery：

代码语言：javascript
复制
    $('.toggle').click(function(e) {
        e.preventDefault();
        var $this = $(this);
        if ($this.next().hasClass('show')) {
            $this.next().removeClass('show');
            $this.next().slideUp(350);
        } else {
            $this.parent().parent().find('li .inner').removeClass('show');
            $this.parent().parent().find('li .inner').slideUp(350);
            $this.next().toggleClass('show');
            $this.next().slideToggle(350);
        }
    });

到目前为止，WHat已转换为Javascript：

代码语言：javascript
复制
var toggle = document.querySelectorAll('.toggle');
for (let i = 0; i < toggle.length; i++) {
  var toggleItem = toggle[i];
  toggleItem.addEventListener('click', function(e) {
    var nextSibling = e.target.nextElementSibling;
    if(nextSibling.classList.contains('show')){
      //NOT SURE HOW TO CONVERT
    } else { 
      //NOT SURE HOW TO CONVERT
    }

  }

有人能帮我处理剩下的事吗？我浪费了太多的时间试图在没有帮助的情况下解决这个问题。谢谢

下面是完整的代码片段：

​

代码语言：javascript
复制
var toggle = document.querySelectorAll('.toggle');
for (let i = 0; i < toggle.length; i++) {
  var toggleItem = toggle[i];
  toggleItem.addEventListener('click', function(e) {
    console.log("Target", e.target.nextElementSibling);
    var nextSibling = e.target.nextElementSibling;
    console.log("Target", nextSibling);
    if(nextSibling.classList.contains('show')){
      //NOT SURE HOW TO CONVERT
    } else { 
      //NOT SURE HOW TO CONVERT
    }

  });
  }
代码语言：javascript
复制
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UN_r8OUuhs.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0e.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UNirkOUuhs.ttf) format('truetype');
}
@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/pacifico/v17/FwZY7-Qmy14u9lezJ-6H6Mw.ttf) format('truetype');
}
* {
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}
a {
  text-decoration: none;
  color: inherit;
}
p {
  font-size: 1.1em;
  margin: 1em 0;
}
.description {
  margin: 1em auto 2.25em;
}
body {
  width: 40%;
  min-width: 300px;
  max-width: 400px;
  margin: 1.5em auto;
  color: #333;
}
h1 {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  font-size: 2.5em;
}
ul {
  list-style: none;
  padding: 0;
}
ul .inner {
  padding-left: 1em;
  overflow: hidden;
  display: none;
}
ul .inner.show {
  /*display: block;*/
}
ul li {
  margin: 0.5em 0;
}
ul li a.toggle {
  width: 100%;
  display: block;
  background: rgba(0, 0, 0, 0.78);
  color: #fefefe;
  padding: 0.75em;
  border-radius: 0.15em;
  transition: background 0.3s ease;
}
ul li a.toggle:hover {
  background: rgba(0, 0, 0, 0.9);
}
代码语言：javascript
复制
<ul class="accordion">
  <li>
    <a class="toggle" href="javascript:void(0);">Item 1</a>
    <ul class="inner">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </li>

  <li>
    <a class="toggle" href="javascript:void(0);">Item 2</a>
    <ul class="inner">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </li>

  <li>
    <a class="toggle" href="javascript:void(0);">Item 3</a>
    <ul class="inner">
      <li>
        <a href="#" class="toggle">Technically any number of nested elements</a>
        <ul class="inner">
          <li>
            <a href="#" class="toggle">Another nested element</a>
            <div class="inner">
              <p>
                As long as the inner element has inner as one of its classes then it will be toggled.
              </p>
            </div>
          </li>
        </ul>
      </li>

      <li>Option 2</li>

      <li>Option 3</li>
    </ul>
  </li>
</ul>

​

javascript
jquery
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-06-16 13:34:29

您可以简单地使用forEach循环遍历所有的forEach类，然后在这个循环中从它们中删除show类，然后从nextSibling元素中删除toggle类。

演示代码：

​

代码语言：javascript
复制
var toggle = document.querySelectorAll('.toggle');
for (let i = 0; i < toggle.length; i++) {
  var toggleItem = toggle[i];
  toggleItem.addEventListener('click', function(e) {
    var nextSibling = e.target.nextElementSibling;
    if (nextSibling.classList.contains('show')) {
      nextSibling.classList.remove("show") //remove show class from next,,siblings
    } else {
      //loop through all inner element
      e.target.parentElement.parentElement.querySelectorAll("li .inner").forEach(function(el) {
        el.classList.remove("show") //remove show class
      })
      nextSibling.classList.toggle("show") //toggle
    }

  });
}
代码语言：javascript
复制
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UN_r8OUuhs.ttf) format('truetype');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0e.ttf) format('truetype');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UNirkOUuhs.ttf) format('truetype');
}

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/pacifico/v17/FwZY7-Qmy14u9lezJ-6H6Mw.ttf) format('truetype');
}

* {
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}

a {
  text-decoration: none;
  color: inherit;
}

p {
  font-size: 1.1em;
  margin: 1em 0;
}

.description {
  margin: 1em auto 2.25em;
}

body {
  width: 40%;
  min-width: 300px;
  max-width: 400px;
  margin: 1.5em auto;
  color: #333;
}

h1 {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  font-size: 2.5em;
}

ul {
  list-style: none;
  padding: 0;
}

ul .inner {
  padding-left: 1em;
  overflow: hidden;
  display: none;
}

ul .inner.show {
  display: block;
}

ul li {
  margin: 0.5em 0;
}

ul li a.toggle {
  width: 100%;
  display: block;
  background: rgba(0, 0, 0, 0.78);
  color: #fefefe;
  padding: 0.75em;
  border-radius: 0.15em;
  transition: background 0.3s ease;
}

ul li a.toggle:hover {
  background: rgba(0, 0, 0, 0.9);
}
代码语言：javascript
复制
<ul class="accordion">
  <li>
    <a class="toggle" href="javascript:void(0);">Item 1</a>
    <ul class="inner">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </li>

  <li>
    <a class="toggle" href="javascript:void(0);">Item 2</a>
    <ul class="inner">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </li>

  <li>
    <a class="toggle" href="javascript:void(0);">Item 3</a>
    <ul class="inner">
      <li>
        <a href="#" class="toggle">Technically any number of nested elements</a>
        <ul class="inner">
          <li>
            <a href="#" class="toggle">Another nested element</a>
            <div class="inner">
              <p>
                As long as the inner element has inner as one of its classes then it will be toggled.
              </p>
            </div>
          </li>
        </ul>
      </li>

      <li>Option 2</li>

      <li>Option 3</li>
    </ul>
  </li>
</ul>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/67991570

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档