Question

我是HTML，CSS，JS，Bootstrap和JQuery的新手，我遇到了一个问题，我无法找到解决方案。

我有一个简单的下拉列表：

<div id="testform" class="container">
    <form action="action_page.php">
        <fieldset>
            <legend>Study</legend>
            <div class="dropdown">
                <button id="study" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Study
                <span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li><a href="#" data-value="action-1">Digital Media Engineering</a></li>
                </ul>
            </div>
        </fieldset>
    </form>
</div>

我有一个在文档准备就绪时崩溃的div

$(document).ready(function(){
        $(".focus_hide").addClass("collapse");
});

我想要做的是在点击我的下拉值时显示此div（在本例中为数字媒体工程）。但是我想添加多个解决方案，所以根据你在下拉列表中选择的内容，我想显示一个与此匹配的div ..我计划让多个div匹配下拉列表中的选项，然后只显示匹配选择的div 。我想在选择“数字媒体工程”时展示的div是：

<div class="focus_hide" id="dme">
    <form action="action_page.php">
        <fieldset>
            <legend>Focus Area</legend>
            <div class="dropdown">
                <button id="study" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Focus
                <span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li><a href="#">Social media and apps</a></li>
                    <li><a href="#">UX User experience</a></li>
                    <li><a href="#">Data science</a></li>
                    <li><a href="#">Computer games</a></li>
                    <li><a href="#">Computer graphics</a></li>
                </ul>
            </div>
        </fieldset>
    </form>
</div>

我缺少的是使用id =“dme”来“解除”div的JS代码。

Answer 1

以下代码段将为您提供有关您需要执行的操作的一般概念。请注意下面的更改，以使其工作。您必须找到这些变化以及它们如何实现您想要的结果。

$(document).ready(function() {
  $(".focus_hide").hide();

  $(".show_dme").click(function() {
    $(".focus_hide").show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testform" class="container">
  <form action="action_page.php">
    <fieldset>
      <legend>Study</legend>
      <div class="dropdown">
        <button id="study" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Study
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#" class="show_dme" data-value="action-1">Digital Media Engineering</a>
          </li>
        </ul>
      </div>
    </fieldset>
  </form>
</div>
<div class="focus_hide" id="dme">
  <form action="action_page.php">
    <fieldset>
      <legend>Focus Area</legend>
      <div class="dropdown">
        <button id="study" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Focus
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Social media and apps</a>
          </li>
          <li><a href="#">UX User experience</a>
          </li>
          <li><a href="#">Data science</a>
          </li>
          <li><a href="#">Computer games</a>
          </li>
          <li><a href="#">Computer graphics</a>
          </li>
        </ul>
      </div>
    </fieldset>
  </form>
</div>

Bootstrap下拉单击，取消折叠div

1 个答案: