2014-10-22 1 views
1

я это Bootstrap включен HTML код:Могу ли я программно закрыть раскрывающееся меню, отображаемое с помощью масштабируемого NavBar?

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="width: 100%"> 
    <div class="navbar-header" style="width: 100%"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example- navbar-collapse"> 
      <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span 
          class="icon-bar"></span><span class="icon-bar"></span> 
     </button> 
     <div style="color: #FFFFFF"> 
      <div> 
       <h4 style="text-indent: 15px; padding: 0px; margin: 10px 0px 0px 0px;"> 
        <span style="color: #FFFFFF;">Title#1</span><span style="color: #1f7fbb">Motion</span> 
       </h4> 
       <h4 style="padding: 0px; margin: 0px; text-indent: 15px"> 
        <small style="font-size: x-small;">Title#2</small> 
       </h4> 
      </div> 
     </div> 
     <div class="collapse navbar-collapse" id="example-navbar-collapse"> 
      <ul id="Select1" class="nav navbar-nav"> 
       <li class="active"><a href="#">iOS</a></li> 
       <li><a href="#">SVN#1</a></li> 
       <li><a href="#">SVN#2</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 
</nav> 

<script type="text/javascript" > 
    function test() { 
     alert('hi'); 
     $("#example-navbar-collapse").dropdown('toggle'); 
    } 
</script> 

Простите меня, если это основной вопрос, но после того, как пользователь нажал/дотронулся «SVN # 2» Я хотел бы выпадающий разрушаться.

Предназначен для небольших мобильных устройств. Можно ли это сделать легко?

ответ

1

Просто сделай это:

<li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Click Me</a> 
     <ul class="dropdown-menu" role="menu"> 
     <li><a href="#">SVN#1</a></li> 
      <li><a href="#">SVN#2</a></li> 
     </ul> 
    </li> 

Заменить свой код с этим:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="width: 100%"> 
<div class="navbar-header" style="width: 100%"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example- navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span 
         class="icon-bar"></span><span class="icon-bar"></span> 
    </button> 
    <div style="color: #FFFFFF"> 
     <div> 
      <h4 style="text-indent: 15px; padding: 0px; margin: 10px 0px 0px 0px;"> 
       <span style="color: #FFFFFF;">Title#1</span><span style="color: #1f7fbb">Motion</span> 
      </h4> 
      <h4 style="padding: 0px; margin: 0px; text-indent: 15px"> 
       <small style="font-size: x-small;">Title#2</small> 
      </h4> 
     </div> 
    </div> 

    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Click Me</a> 
     <ul class="dropdown-menu" role="menu"> 
     <li><a href="#">SVN#1</a></li> 
      <li><a href="#">SVN#2</a></li> 
     </ul> 
    </li> 
</div> 

+0

Я должен что-то делать неправильно. Событие поднято, хотя .. :( –

+0

@ Андрей Андреев понял, не забудьте заменить «выпадающее меню» выпадающим меню, которое вы хотите вызвать.) в вашем случае это будет: $ («# example-navbar-collapse»). dropdown («toggle»). Сообщите мне, если это сработает. –

+0

HI, да, я сделал это - спасибо - еще не радость –

3

Используйте выпадающий список ('тумблер') метод

$("<selector here to select your dropdown>").dropdown('toggle') 
+1

Привет, спасибо за ваш комментарий. Это не сработало для меня. Я мог бы неправильно интерпретировать то, что вы имели в виду. Я изменил свой вопрос, чтобы показать изменения, которые вы предложили. спасибо –

+1

Ваш селектор ошибочен. Вместо $ ("# Select1") используйте $ ("# mySelector") – sventschui

+0

Привет, да. Это была ошибка копирования и вставки. Обновлено сейчас. Это все еще не работает :( –

0

I е ound, помещая это в:

<a href="#" id="svn1" data-toggle="collapse" data-target=".navbar-collapse"> 

сделал трюк.

Надеюсь, это поможет кому-то ...

Смежные вопросы