Javascript - 选择后第二个下拉菜单消失？

Question

我有多个相互关联的下拉菜单。第一个选择显示第二个菜单（两个中的一个），然后显示内容（Menu-ception！）。但是，当您完成此过程后，第二个菜单消失，我希望它保持打开状态以便于访问。

我想暂时坚持使用普通的Javascript，请不要使用JQuery解决方案。

我是编码新手，所以请轻松哈哈。任何帮助表示赞赏，干杯！

＆＃13;

＆＃13;

document.getElementById('target').addEventListener('change', function() {
  'use strict';
  var vis = document.querySelector('.vis'),
    target = document.getElementById(this.value);
  if (vis !== null) {
    vis.className = 'inv';
  }
  if (target !== null) {
    target.className = 'vis';
  }
});

document.getElementById('trad').addEventListener('change', function() {
  'use strict';
  var vis = document.querySelector('.vis'),
    target = document.getElementById(this.value);
  if (vis !== null) {
    vis.className = 'inv';
  }
  if (target !== null) {
    target.className = 'vis';
  }
});

document.getElementById('simp').addEventListener('change', function() {
  'use strict';
  var vis = document.querySelector('.vis'),
    target = document.getElementById(this.value);
  if (vis !== null) {
    vis.className = 'inv';
  }
  if (target !== null) {
    target.className = 'vis';
  }
});

＆＃13;

    p {
      font-size: 2.5vw;
      font-family: arial;
    }
    select {
      width: auto;
      margin: 0;
      font-size: 2.5vw;
      font-family: arial;
    }
    .inv {
      display: none;
    }

＆＃13;

<select id="target">
  <option value="">System</option>
  <option value="trad">Traditional</option>
  <option value="simp">Simplfit</option>

  <select>

    <select id="trad" class="inv">
      <option value="">Width</option>
      <option value="content1">400</option>
      <option value="content2">600</option>
      <option value="content3">800</option>
      <option value="content4">1000</option>
      <option value="content5">1210</option>
      <select>

        <select id="simp" class="inv">
          <option value="">Width</option>
          <option value="content6">400</option>
          <option value="content7">600</option>
          <option value="content8">800</option>
          <option value="content9">1000</option>
          <option value="content10">1210</option>
          <select>

            <p id="content1" class="inv">Content 1</p>

            <p id="content2" class="inv">Content 2</p>

            <p id="content3" class="inv">Content 3</p>

            <p id="content4" class="inv">Content 4</p>

            <p id="content5" class="inv">Content 5</p>

            <p id="content6" class="inv">Content 6</p>

            <p id="content7" class="inv">Content 7</p>

            <p id="content8" class="inv">Content 8</p>

            <p id="content9" class="inv">Content 9</p>

            <p id="content10" class="inv">Content 10</p>

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题在于您为trad和simp处理程序获取可见​​元素的方式。

由于您使用.vis获取queryselector元素，因此它将返回当前的select元素，因为它具有vis类而不是content<\d>元素之一，只需微调选择器就可以解决问题。

＆＃13;

＆＃13;

document.getElementById('target').addEventListener('change', function() {
  'use strict';
  var vis = document.querySelector('select.vis'),
    target = document.getElementById(this.value),
    ct = document.querySelector('.content.vis');
  if (vis !== null) {
    vis.className = 'inv';
  }
  if (target !== null) {
    target.className = 'vis';
  }
  if (ct != null) {
    ct.className = 'content inv';
  }
});

document.getElementById('trad').addEventListener('change', function() {
  'use strict';
  var vis = document.querySelector('.vis:not(select)'),
    target = document.getElementById(this.value);
  if (vis !== null) {
    vis.className = 'content inv';
  }
  if (target !== null) {
    target.className = 'content vis';
  }
});

document.getElementById('simp').addEventListener('change', function() {
  'use strict';
  var vis = document.querySelector('.vis:not(select)'),
    target = document.getElementById(this.value);
  if (vis !== null) {
    vis.className = 'content inv';
  }
  if (target !== null) {
    target.className = 'content vis';
  }
});

＆＃13;

p {
  font-size: 2.5vw;
  font-family: arial;
}
select {
  width: auto;
  margin: 0;
  font-size: 2.5vw;
  font-family: arial;
}
.inv {
  display: none;
}

＆＃13;

<select id="target">
  <option value="">System</option>
  <option value="trad">Traditional</option>
  <option value="simp">Simplfit</option>
  <!--Need closing tag here-->
</select>

<select id="trad" class="inv">
  <option value="">Width</option>
  <option value="content1">400</option>
  <option value="content2">600</option>
  <option value="content3">800</option>
  <option value="content4">1000</option>
  <option value="content5">1210</option>
  <!--Need closing tag here-->
</select>

<select id="simp" class="inv">
  <option value="">Width</option>
  <option value="content6">400</option>
  <option value="content7">600</option>
  <option value="content8">800</option>
  <option value="content9">1000</option>
  <option value="content10">1210</option>
  <!--Need closing tag here-->
</select>

<p id="content1" class="content inv">Content 1</p>
<p id="content2" class="content inv">Content 2</p>
<p id="content3" class="content inv">Content 3</p>
<p id="content4" class="content inv">Content 4</p>
<p id="content5" class="content inv">Content 5</p>
<p id="content6" class="content inv">Content 6</p>
<p id="content7" class="content inv">Content 7</p>
<p id="content8" class="content inv">Content 8</p>
<p id="content9" class="content inv">Content 9</p>
<p id="content10" class="content inv">Content 10</p>

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

document.getElementById('target').addEventListener('change', function() {
  'use strict';
  var vis = document.querySelector('select.vis'),
    target = document.getElementById(this.value),
    ct = document.querySelector('.content.vis');
  if (vis !== null) {
    vis.className = 'inv';
  }
  if (target !== null) {
    target.className = 'vis';
  }
  if (ct != null) {
    ct.className = 'content inv';
  }
});

document.getElementById('trad').addEventListener('change', function() {
  'use strict';
  var vis = document.querySelector('.vis:not(select)'),
    target = document.getElementById(this.value);
  if (vis !== null) {
    vis.className = 'content inv';
  }
  if (target !== null) {
    target.className = 'content vis';
  }
});

document.getElementById('simp').addEventListener('change', function() {
  'use strict';
  var vis = document.querySelector('.vis:not(select)'),
    target = document.getElementById(this.value);
  if (vis !== null) {
    vis.className = 'content inv';
  }
  if (target !== null) {
    target.className = 'content vis';
  }
});

＆＃13;

p {
  font-size: 2.5vw;
  font-family: arial;
}
select {
  width: auto;
  margin: 0;
  font-size: 2.5vw;
  font-family: arial;
}
.inv {
  display: none;
}

＆＃13;

<select id="target">
  <option value="">System</option>
  <option value="trad">Traditional</option>
  <option value="simp">Simplfit</option>
  <!--Need closing tag here-->
</select>

<select id="trad" class="inv">
  <option value="">Width</option>
  <option value="content1">400</option>
  <option value="content2">600</option>
  <option value="content3">800</option>
  <option value="content4">1000</option>
  <option value="content5">1210</option>
  <!--Need closing tag here-->
</select>

<select id="simp" class="inv">
  <option value="">Width</option>
  <option value="content6">400</option>
  <option value="content7">600</option>
  <option value="content8">800</option>
  <option value="content9">1000</option>
  <option value="content10">1210</option>
  <!--Need closing tag here-->
</select>

<p id="content1" class="content inv">Content 1</p>
<p id="content2" class="content inv">Content 2</p>
<p id="content3" class="content inv">Content 3</p>
<p id="content4" class="content inv">Content 4</p>
<p id="content5" class="content inv">Content 5</p>
<p id="content6" class="content inv">Content 6</p>
<p id="content7" class="content inv">Content 7</p>
<p id="content8" class="content inv">Content 8</p>
<p id="content9" class="content inv">Content 9</p>
<p id="content10" class="content inv">Content 10</p>

＆＃13;

＆＃13;

＆＃13;