Bootstrap меню 3 держать открытыми и показать DIV

Question

Я построил бар Nav с профилем выпадающего меню (правая часть меню):

http://www.bootply.com/Rqj51l2VFO

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
     </div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav" <!--style="width:96%" -->> 
      <li><a href="{$settings['web_process_url']}?function=show_open_cases">Open Cases</a></li> 
      <li><a href="{$settings['web_process_url']}?function=show_closed_cases">Closed Cases</a></li> 
      <li><a href data-toggle="modal" data-target="#create_case" data-backdrop="true">Raise New Case</a></li> 
      <li class="active"><a href="#">{$case['object_ref']}</a></li> 
      <!-- <li style="float:right;"><a href="" data-toggle="modal" data-target="#help-modal"><span class="glyphicon glyphicon-question-sign"/></a></li> --> 
     </ul> 

     <!-- http://bootsnipp.com/snippets/featured/account-in-navbar --> 
     <ul class="nav navbar-nav navbar-right"> 
      <li class="dropdown" id="menu"> 
      <a href="#" data-toggle="dropdown"> 
       <span class="glyphicon glyphicon-user"></span> 
       <strong>{$person['name']}</strong> 
       <span class="glyphicon glyphicon-chevron-down" style="margin-left: 10px;"></span> 
      </a> 
      <ul class="dropdown-menu"> 
       <li> 
       <div class="navbar-login" style="width: 400px;"> 
        <div class="row"> 
        <div class="col-lg-4"> 
         <p class="text-center"><span class="glyphicon glyphicon-user icon-size" style="font-size: 75px;"></span></p> 
         <p><a href="#" data-toggle="collapse" data-target="#change_pic">Change Photo</a></p> 
        </div> 
        <div class="collapse" id="change_pic"> 
         <p>Hi!</p> 
        </div> 
        <div class="col-lg-8"> 
         <p class="text-left"><strong>Email Address</strong></p> 
         <p class="text-left small">{$person['main_location[email]']}</p> 
        </div> 
        </div> 
       </div> 
       </li> 
       <li class="divider"></li> 
       <li> 
       <div class="navbar-login navbar-login-session"> 
        <div class="row"> 
        <div class="col-lg-3"></div> 
        <div class="col-lg-6"> 
         <p><a href="{$settings['web_process_url']}?logout=1" class="btn btn-danger btn-block">Logout</a></p> 
        </div> 
        <div class="col-lg-3"></div> 
        </div> 
       </div> 
       </li> 
      </ul> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </nav> 

При нажатии на ссылку изменить фотографию, Я хочу открыть Div, и меню останется открытым, чтобы пользователь мог взаимодействовать с входом, который показывает, что пользователь вводит URL-адрес фотографии, которую они хотят в профиле.

Это прекрасно работает, но меню исчезает. Поэтому я добавил следующий JS, так что меню остается:

JS:

$('#menu .dropdown-menu').on({ 
    "click": function(e) { 
    e.stopPropagation(); 
    } 
}); 

Проблема у меня есть, что теперь меню остается открытым - загрузочный класс коллапса не работает, чтобы показать/скрыть.

Может кто-нибудь объяснить, что я делаю неправильно здесь, пожалуйста?

Answer 1

Вот один из способов сохранить раскрывающееся меню после щелчка и сохранить класс смены, чтобы показать/скрыть. ...

добавить ID на кнопке Изменить фото:

<p><a href="#" id="change-photo" data-toggle="collapse" data-target="#change_pic">Change Photo</a></p> 

использования этой функции следующие:

$('#change-photo').on('click', function() { 
    $('#change_pic').toggle(); 
    return false; 
}); 

проверить его здесь: http://www.bootply.com/8Yo0fBXgN9#