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> 

И у меня есть DIV, который сжимает в документе готового

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

То, что я хочу сделать, чтобы получить это Див, чтобы показать, когда нажав на мое выпадающее значение (в этом случае цифровая медиатехника). Однако я хочу добавить несколько решений, поэтому в зависимости от того, что вы выберете в раскрывающемся списке, я хочу показать 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, чтобы «не-коллапс» ДИВ с идентификатором = «Dme» ..

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>