javascript - 使用 jQuery 或 JS 隐藏不同下拉选项上的 div

Question

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

我的问题是这样的:

一旦第二个 div 出现，如果我返回到初始下拉列表并选择不同的选项，我希望绿色的 #info div 消失，它当前保持可见，并包含与最后一个单击的按钮相关的内容选择了不同的下拉选项。

我非常感谢任何人可以提供的帮助!非常感谢您的浏览。非常感谢能够发挥您所有的聪明才智。

这是我的 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 就会隐藏。然后，如果有人单击按钮，它将显示。该 show() 函数将始终运行，但如果您多次单击该按钮，该函数将被忽略。

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

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