Bootstrap: Как изменить цвет элемента меню после закрытия модального окна

Question

Я использую twitter bootstrap и пытается открыть модальное всплывающее окно, нажав на пункт меню. Вот мой код:

<div class="navbar navbar-fixed-bottom"> 
    <div class="navbar-inner"> 
     <ul class="nav pull-right"> 
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu</a> 
       <ul class="dropdown-menu"> 
        <li class="active"><a href="">Some item 1</a></li> 
        <li class=""><a href="">Some item 2</a></li> 
       </ul> 
      </li> 
      <li class="dropdown"><a href="#myModal" class="dropdown-toggle" data-toggle="modal"> 
       Contacts</a></li> 
     </ul> 
    </div> 
    <!-- /.navbar-inner --> 
</div> 

И мое окно модальное:

<div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 
    aria-hidden="true"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 
      ×</button> 
     <h3 id="myModalLabel"> 
      Modal header</h3> 
    </div> 
    <div class="modal-body"> 
     <p> 
      One fine body…</p> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true"> 
      Close</button> 
     <button class="btn btn-primary"> 
      Save changes</button> 
    </div> 
</div> 

Первый пункт меню имеет выпадающие данные рычажков. Второй пункт меню имеет модальные данные. Когда я нажимаю на первый элемент, он выглядит как щелчок и изменение собственного цвета. Когда я нажимаю на второй пункт (Контакты), цвет элемента оставляет то же самое. Я добавил событие OnClick для «Контактов» Ли элемента:

onclick="$(this).addClass('modal-open-li');" 

где я пишу свой собственный modal-open-li класс, чтобы сделать этот элемент щелкнул. Но как я могу вернуть цвет элемента li, когда я закрываю свое модальное всплывающее окно? Кроме того, могу ли я добавить несколько данных для одного и того же элемента li, например data-toggle="modal dropdown"?

Answer 1

Если я правильно понимаю, что вы хотите удалить класс в ссылке, когда модальный закрыта, для этого можно привязать к «спрятать» события модели, попробуйте добавить этот JavaScript код:

$('#myModal').on('hide',function(){ 
    $('.nav > li > a.modal-open-li').removeClass('modal-open-li'); 
}); 

И о добавлении нескольких элементов данных для элемента, я не знаю, возможно ли это, но я бы посоветовал это сделать, потому что вам действительно нужно переключать выпадающее меню и одновременно открывать модальный режим? Я думаю, что был бы лучший способ улучшить UX