javascript - jQuery toggleClass 显示不同菜单相关

Question

我是 jQuery 的新手，我一直想尝试的一件事是创建一次显示不同部分的按钮。我刚刚学习了 toggleClass 函数，目前这就是我所拥有的。有 3 件事我想解决以获得预期的结果。我非常感谢提示和帮助。以下是问题。

1. 我想从可见部分中的列表开始，用户可以选择在他们想要查看的列表之间切换。这是否意味着我必须应用 display:"none" 并可能将其命名为 inactive 类并使用它？

2. 每次我再次点击同一个按钮，它都会回到原始状态，即“display:none”。有没有办法在第二次按下时停止切换效果？

3. 如果我尝试使用前 3 个按钮并尝试通过按 AllButton 来显示所有按钮，由于某种原因它不会显示 SEO 部分。我认为这与我的编码方式有关...

如果我写下的内容让您更加困惑，您能否帮我找到一个引用资料或链接，教您如何以正确的方式执行此操作？我似乎找不到任何地方，包括 YouTube 和 CodePen。我还将留下一个投资组合链接，其中包含我正在努力实现的目标的示例。感谢您的阅读! https://evelyncranston.ca/

var WebButton = $(".buttons button:nth-child(1)");
var EButton = $(".buttons button:nth-child(2)");
var SEOButton = $(".buttons button:nth-child(3)");
var AllButton = $(".buttons button:nth-child(4)");

WebButton[0].onclick = function(){
  $("#points-of-sale ul li:nth-child(2)").removeClass("active");
  $("#points-of-sale ul li:nth-child(3)").removeClass("active");
  $("#points-of-sale ul li:nth-child(1)").toggleClass("active");
}

EButton[0].onclick = function(){
  $("#points-of-sale ul li:nth-child(1)").removeClass("active");
  $("#points-of-sale ul li:nth-child(3)").removeClass("active");
  $("#points-of-sale ul li:nth-child(2)").toggleClass("active");
}

SEOButton[0].onclick = function(){
  $("#points-of-sale ul li:nth-child(1)").removeClass("active");
  $("#points-of-sale ul li:nth-child(2)").removeClass("active");
  $("#points-of-sale ul li:nth-child(3)").toggleClass("active");
}

AllButton[0].onclick = function(){
  $("#points-of-sale ul li").toggleClass("active");
}

#points-of-sale ul li {
   display:none;
}

.active {
    display:block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="buttons">
  <button>Web Design</button>
  <button>E-Commerce</button>
  <button>SEO</button>
  <button>All</button>
</div>

<section id="points-of-sale">
  <ul>
    <li>
        <h3>Web Design</h3>
        <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
    </li>
    <li>
        <h3>E-commerce</h3>
        <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
    </li>
    <li>
        <h3>SEO</h3>
        <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
    </li>
  </ul>
</section>

<!-- begin snippet: js hide: false console: true babel: false -->

Answer 1

试试这个:

https://jsfiddle.net/ewu019hj/

它将您的隐藏/逻辑封装到按钮处理程序可以调用的一个函数中。

var WebButton = $(".buttons button:nth-child(1)");
var EButton = $(".buttons button:nth-child(2)");
var SEOButton = $(".buttons button:nth-child(3)");
var AllButton = $(".buttons button:nth-child(4)");

function show(index) {
    if (typeof(index) === 'undefined') {
        $("#points-of-sale ul li").addClass("active");
    } else {
        $("#points-of-sale ul li").removeClass("active");
        $("#points-of-sale ul li:nth-child(" + index + ")").addClass("active");
    }
}

WebButton[0].onclick = function() {
  show(1);
}

EButton[0].onclick = function() {
  show(2);
}

SEOButton[0].onclick = function() {
  show(3);
}

AllButton[0].onclick = function() {
  show();
}

show(1);

这也为您提供了指定默认值的选项。