使用 jQuery 或 JS 在不同的下拉选择上隐藏 div

Question

当我 select 从下拉列表中选择一个选项时，与该 select 离子关联的一组按钮会出现在 div 中（它应该出现的位置）。然后，我单击其中一个按钮，这会导致第二个 div 出现（#info，绿色背景），并且与该按钮关联的内容会出现在 div 内部（如预期的那样）。

我的问题是：

一旦第二个 div 出现，如果我返回初始下拉列表并 select 一个不同的选项，我希望绿色的#info div 消失，它在哪里尽管 select 编辑了不同的下拉选项，但当前仍然可见并包含与最后单击的按钮关联的内容。

我非常感谢任何人可以提供的帮助！非常感谢您的观看。非常感谢能接触到您所有的聪明才智。

这是我的 Fiddle

$(document).ready(function() {
  $("select").change(function() {
    $(this).find("option:selected").each(function() {
      if ($(this).attr("value") == "red") {
        $(".box").not(".red").hide();
        $(".red").show();

      } else if ($(this).attr("value") == "green") {
        $(".box").not(".green").hide();
        $(".green").show();
      } else if ($(this).attr("value") == "blue") {
        $(".box").not(".blue").hide();
        $(".blue").show();
      } else {
        $(".box").hide();
      }
    });
  }).change();

  $('.buttons button').click(function() {
    $('#info').empty();
    $('#info').html($("#" + $(this).data('link')).html());
  });
});

.box {
  padding: 20px;
  margin-top: 20px;
  border: 1px solid #000;
  width: 200px;
  height: 250px;
  padding: 0px;
  display: inline-block;
  float: left;
}
#button-column {
  text-align: center;
  padding: 0px;
}
button {
  font-size: 12px;
  width: 100px;
  height: 30px;
  padding: 10px;
  margin: 15px;
}
#info {
  width: 250px;
  height: 200px;
  float: left;
  display: inline-block;
  text-align: center;
  margin-left: 15px;
  margin-top: 30px;
}
#dropdown {
  width: 200px;
  text-align: center;
}
.box h3 {
  text-align: center;
}
.info {
  background-color: green;
  height: 200px;
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdown">
  <h3>I am a...</h3>
  <select>
    <option>Select</option>
    <option value="green">Dinosaur</option>
    <option value="red">Unicorn</option>
  </select>
</div>

<div class="green box">
  <h3>Today I am feeling...</h3>
  <ul id="button-column" style="list-style: none;">
    <li class="buttons">
      <button data-link="content">Content</button>
    </li>
    <li class="buttons">
      <button data-link="mad">Mad</button>
    </li>
    <li class="buttons">
      <button data-link="hungry">Hungry</button>
    </li>

  </ul>

</div>

<div class="red box">
  <h3>Today I am feeling...</h3>
  <ul id="button-column" style="list-style: none;">
    <li class="buttons">
      <button data-link="shy">Shy</button>
    </li>
    <li class="buttons">
      <button data-link="curious">Curious</button>
    </li>
    <li class="buttons">
      <button data-link="sleepy">Sleepy</button>
    </li>
  </ul>
</div>
<div id="info">

</div>
<div id="hiddenDivs" style="display:none;">
  <!-- Dinosaur Select -->
  <div id="content">
    <div class="info">
      <h3>Laying in the sun is nice.</h3> 
    </div>
  </div>
  <div id="mad">
    <div class="info">
      <h3>Go knock some trees over!</h3> 
    </div>
  </div>
  <div id="hungry">
    <div class="info">
      <h3>Go make a salad!</h3> 
    </div>
  </div>
  <!-- Unicorn Select -->
  <div id="shy">
    <div class="info">
      <h3>I like to hide in the forest.</h3> 
    </div>
  </div>
  <div id="curious">
    <div class="info">
      <h3>Wait until everyone is asleep.</h3> 
    </div>
  </div>
  <div id="sleepy">
    <div class="info">
      <h3>Napping under a shady tree is the best.</h3> 
    </div>
  </div>

Answer 1

这是更新后的 Fiddle。

您只需在更改或加载时隐藏和显示 #info div。

因此，只要下拉列表发生变化，#info div 就会 hide。然后，如果有人点击一个按钮，它将 show。 show() 函数将始终运行，但如果您多次单击该按钮，该函数将被忽略。

    });
    $("#info").hide(); // Hide
}).change();

$('.buttons button').click(function (){
    $("#info").show(); // Show
    $('#info').empty();
    $('#info').html($("#" + $(this).data('link')).html());
});

使用 jQuery 或 JS 在不同的下拉选择上隐藏 div

Use jQuery or JS to hide div on different dropdown selection

javascript

jquery

toggle

hide

drop-down-menu