jQuery Toggle in and out问题

Question

我使用的是 .toggle 事件来打开和关闭内容。目前这90%的工作都在进行中。

然而，当我在不同状态之间移动时，我看到了一个不受欢迎的问题。

问题是 - 我希望能够完成 第四步 在旅途中 -

1. 我选择了 艺术
2. 艺术内容显示
3. 然后我选择 音乐
4. 艺术内容被关闭，音乐内容被打开。

$(document).ready(function() {
  $('#active-screen').click(function() {
    $('#show-music, #show-art, #show-food').toggle(450);
  });
  $('#active-music').click(function() {
    $('#show-screen, #show-art, #show-food').toggle(450);
  });
  $('#active-art').click(function() {
    $('#show-music, #show-screen, #show-food').toggle(450);
  });
  $('#active-food').click(function() {
    $('#show-screen, #show-art, #show-music').toggle(450);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="menu">
  <a href="#" id="active-screen">Screen</a>
  <a href="#" id="active-music">Music</a>
  <a href="#" id="active-art">Art</a>
  <a href="#" id="active-food">Food</a>
</div>

<div id="show-screen">show screen</div>
<div id="show-music">show music</div>
<div id="show-art">show art</div>
<div id="show-food">show food</div>

任何帮助将是巨大的。

Answer 1

这个问题是因为你调用了 toggle() 上的所有 "显示 "元素，所以单个显示的项目是隐藏的，但其他隐藏的项目是显示的。

为了解决这个问题，并使逻辑变得枯燥，你可以在所有元素上使用通用类。然后，你可以隐藏它们，同时显示在 href 的点击率 a诸如此类的东西。

jQuery($ => {
  let $show = $('.show');

  $('.menu a').on('click', function(e) {
    e.preventDefault();
    $show.not(this).stop().hide(450);
    $($(this).attr('href')).stop().toggle(450);
  });
});

.show { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
  <a href="#show-screen">Screen</a>
  <a href="#show-music">Music</a>
  <a href="#show-art">Art</a>
  <a href="#show-food">Food</a>
</div>

<div id="show-screen" class="show">show screen</div>
<div id="show-music" class="show">show music</div>
<div id="show-art" class="show">show art</div>
<div id="show-food" class="show">show food</div>