Javascript 引导下拉单击，解压div

我对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在单击我的下拉值时显示出来（在本例中为数字媒体工程）。但是，我想添加多个解决方案，因此根据您在下拉列表中选择的内容，我想显示一个与此匹配的div。。我计划让多个div与下拉列表中的选项匹配，然后只显示与选项匹配的div。选择“数字媒体工程”时，我要显示的分区如下：

重点领域
选择焦点

---

我缺少的是用id=“dme”来“取消折叠”div的JS代码。

下面的代码片段将让您大致了解需要做什么。请注意对以下内容所做的更改，以使其正常工作。你必须找到这些变化以及它们是如何达到你想要的结果的

$（文档）.ready（函数（）{
$（“.focus_hide”）.hide（）；
$（“.show_dme”）。单击（函数（）{
$（“.focus_hide”）.show（）；
});
});

学习
选择研究




重点领域
选择焦点












这看起来像是我要做的。我一到家就去试试！但在本例中，您使用的是“hide（）”和“show（）”。您知道是否可以使用“collapse（）”？@Zeliax是的，您可以使用Jquery collapse，我没有在示例中包括它，因为它是第三方库。
$(document).ready(function(){
        $(".focus_hide").addClass("collapse");
});

<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>