Bootstrap dropdown click，uncollapse div

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> 

而且我有一個倒在文件準備

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

我想要做的是讓這個div時顯示一個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> 

我所缺少的是JS代碼「非摺疊」使用id =「DME」在div ..

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>