javascript - 如何关闭打开，同时打开新的 w/o 显示 :none

Question

$(document).ready(function() {

  $('.nav li').on('click', function() {
    $(this).toggleClass('navChange');
  });

  $('.sub').on('click', function() {
    $('.subBkgd').toggleClass('subChange');
    $('ul', this).toggleClass('ulChange');

  });

});

.subBkgd {
  display: block;
  visibility: hidden;
  position: absolute;
  width: 10px;
  height: 20px;
  margin: 20px auto 0;
  background-color: rgba(0, 0, 0, .4);
  transition: transform .25s ease-in-out!important;
  z-index: -10;
}

.subChange {
  visibility: visible!important;
  transform: scaleX(200);
}

.nav ul {
  display: flex;
  width: 80%;
  justify-content: space-between;
  text-align: center;
}

.nav ul li {
  font: 400 .75em Verdana, sans-serif;
  white-space: nowrap;
  height: 20px;
  width: 15%;
  transition: background .25s ease-in-out;
}

.nav ul ul {
  visibility: hidden;
  display: flex;
  margin-top: 10px;
  padding: 0 2%;
}

.nav ul ul a {
  padding: 0 20px;
}

.navChange {
  background-color: #666;
}

.navChange a {
  color: #F00!important;
  text-decoration: none;
}

.ulChange {
  visibility: visible!important;
  opacity: 1!important;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class='subBkgd'></div>

<div class='nav'>
  <ul id='menu'>
    <li><a href='#'>HOME</a></li>
    <li class='sub'><a href='#'>DESIGNS ></a>
      <ul>
        <a href='#'>item1</a>
        <a href='#'>item2</a>
        <a href='#'>item3</a>
      </ul>
    </li>
    <li class='sub'><a href='#'>CUSTOMIZE ></a>
      <ul>
        <a href='#top'>item5</a>
        <a href='#colors'>item6</a>
      </ul>
    </li>
    <li class='sub'><a href='#'>FROM SCRATCH></a>
      <ul>
        <a href='#top'>item7</a>
        <a href='#'>item8</a>
        <a href='#'>item9</a>
      </ul>
    </li>
    <li><a href='#'>ORDER </a></li>
    <li><a href='#'>OUR STORY </a></li>
  </ul>
</div>

此代码在每个菜单按钮 (LI) 上单独工作，但缺少对已经打开的按钮的切换，更不用说如果用户在菜单外单击时需要切换所有内容。

$('.nav li').on('click', function() {
    $(this).toggleClass('navChange'); 
});

$('.sub').on('click', function() {
  $('.subBkgd').toggleClass('subChange');
  $('ul', this).toggleClass('ulChange');
});

链接到当前测试导航:

http://cardscreative.com/cc2017/test4.html

这个 fiddle 看起来很有前途，但我似乎无法适应我的具体情况:

http://jsfiddle.net/nick_craver/29j3e/1/

我的“新手”问题:需要 jquery(3.3.1？)代码来切换具有 UL 和底部过渡 div(效果)的导航按钮，以便在单击时，NEW LI 切换“ON”同级'OFF' 及其下的所有内容，包括转换后的 div，同时打开 NEW LI，它是 UL 并再次切换转换后的 div。

我到处都尝试过 .sibling、.each、.filter，并且大部分都对它进行了哈希处理。请查看下面的 fiddle ，了解目前的工作情况。我删除了所有其他无效的实验代码。 (子 UL 只有链接，没有 LI 用于安排目的。)感谢您的帮助和智慧。好想学这东西! (jquery 的这一部分对我来说似乎变成了一个真正的兔子洞!)

半工作 js 链接:

https://jsfiddle.net/jvxcc0Lw/48/

此外，出于移动目的，我尽量避免使用 :hover。

Answer 1

我更新了代码以使其更具可读性。

	$('.list-item').on('click', function() {
	  $('.list-item').not(this).removeClass('activeItem')
	    .children('.sub-Menu').removeClass('showSubMenu');
	  $(this).toggleClass('activeItem');
	  $(this).children('.sub-Menu').toggleClass('showSubMenu')
	});

#menu {
  display: flex;
  width: 80%;
  justify-content: space-around;
  text-align: center;
}

ul,
li {
  list-style: none;
}

.subChange {
  visibility: visible !important;
  transform: scaleX(200);
}

.nav ul li {
  font: 400 .75em Verdana, sans-serif;
  white-space: nowrap;
  height: 20px;
  width: 15%;
  transition: background .25s ease-in-out;
}

.sub-Menu {
  visibility: hidden !important;
  display: flex;
  margin-top: 10px;
  padding: 0 2%;
  width: 0;
  background-color: rgba(0, 0, 0, .4);
  transition: width .25s ease-in-out !important;
}

.sub-Menu a {
  font-size: 1.2em;
}

.activeItem {
  background-color: #666;
}

.activeItem a {
  color: #F00 !important;
  text-decoration: none;
}

.showSubMenu {
  visibility: visible !important;
  opacity: 1 !important;
  width: 350px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="effectsBackground"></div>
<div class='nav'>
  <ul id='menu'>
    <li class="list-item"><a href='#'>HOME</a></li>
    <li class="list-item"><a href='#'>DESIGNS ></a>
      <ul class="sub-Menu">
        <li><a href='#'>item1</a></li>
        <li><a href='#'>item2</a></li>
        <li><a href='#'>item3</a></li>
      </ul>
    </li>
    <li class="list-item"><a href='#'>CUSTOMIZE ></a>
      <ul class="sub-Menu">
        <li><a href='#top'>item5</a></li>
        <li><a href='#colors'>item6</a></li>
      </ul>
    </li>
    <li class="list-item"><a href='#'>FROM SCRATCH></a>
      <ul class="sub-Menu">
        <li><a href='#top'>item7</a></li>
        <li><a href='#'>item8</a></li>
        <li><a href='#'>item9</a></li>
      </ul>
    </li>
    <li class="list-item"><a href='#'>ORDER </a></li>
    <li class="list-item"><a href='#'>OUR STORY </a></li>
  </ul>
</div>

主要的魔力在于此$('.list-item').not(this).removeClass('activeItem')该行选择除当前列表项之外的所有列表项并删除 activeItem 类。

   ` .children('.sub-Menu').removeClass('showSubMenu');`

现在因为我们已经过滤了父菜单，并且在链接的帮助下，我们将只选择子菜单并删除 showSubmenu

编辑:更新了子元素的 html 标记，现在不使用外部 div，只使用宽度的子菜单过渡来提供效果