Bootstrap 3.2.0: Открыть раскрывающееся меню с javascript

У меня возникли трудности с открытием выпадающего меню с загрузкой 3.2.0 и javascript. Вот HTML (добавлены динамически с JavaScript в йот):Bootstrap 3.2.0: Открыть раскрывающееся меню с javascript

<ul id="assigned" class="nav navbar-nav"> 
    <li id="shopping-cart-dropdown" class="dropdown"> 
     <a href="#" id="dropdown-toggle" class="dropdown-toggle button-assigned" data-toggle="dropdown"> 
     <span class="span-assigned">(0/5)</span> 
     <span class="caret"></span> 
     </a> 
     <ul class="dropdown-menu assigned-menu" role="menu"> 
     <p class="assigned-info"> 
      <span class="bold">You have 5 assignments available.</span> 
     </p> 
     </ul> 
    </li> 
</ul>

И Javascripts я пытался до сих пор:

$("#shopping-cart-dropdown").addClass("open"); //open class not added in dom. bootstrap prevents this? 

$("#dropdown-toggle").dropdown("toggle"); //nothing happens 

$("#dropdown-toggle").click(); //no luck either 

$(".assigned-menu").css("display", "block"); //this displays the dropdown but its not closable forever 
var dd = $('#shopping-cart-dropdown'); 
dd.closable = true; //I can't make it closable with this code

Редактировать: Когда я первый огонь тумблер после того, как создать выпадающие содержимое с

$("#dropdown-toggle").dropdown("toggle");

Он работает

Но когда я вызываю ту же функцию снова, она не делает. Вот функция, которая обновляет содержимое выпадающего (равно как и первый раз их создание):

for (var cnt = 0; cnt < this.AssignedRooms.length; cnt++) { 
     var litext = ""; 
     litext += "<div class='assigned-item' id='assigned-room" + this.AssignedRooms[cnt].RoomNo + "' " + "building-no='" + this.AssignedRooms[cnt].BuildingNo + "'" + " floor-no='" + this.AssignedRooms[cnt].FloorNo + "' room-no='" + this.AssignedRooms[cnt].RoomNo + "'>"; 
     litext += (this.EnableCampus ? "<span class='small bold'>Building </span><span class='small'>" + this.AssignedRooms[cnt].BuildingNo + ", </span>" : ""); 
     litext += "<span class='small bold'>Floor </span><span class='small'>" + this.AssignedRooms[cnt].FloorNo + "</span>, "; 
     litext += "<span class='small bold'>Room </span><span class='small'>" + this.AssignedRooms[cnt].RoomNo + "</span>"; 
     litext += "</div>"; 
     litext += "<div class='assigned-cancel' id='assigned-room-cancel" + this.AssignedRooms[cnt].RoomNo + "' " + "building-no='" + this.AssignedRooms[cnt].BuildingNo + "'" + " floor-no='" + this.AssignedRooms[cnt].FloorNo + "' room-no='" + this.AssignedRooms[cnt].RoomNo + "'>"; 
     litext += "<img src='../../PickContent/img/cancel-small.png' title='Cancel Room " + this.AssignedRooms[cnt].RoomNo + "'/>"; 
     litext += "</div>"; 
     html += "<li class='assigned-list-item'>" + litext + "</li>"; 
    } 

    $("#assigned ul.dropdown-menu").html(html); 

    if (full) { 
     $("#dropdown-toggle").dropdown("toggle"); 
    }

источник

2014-11-10 Barış Ürüm

$ ("# dropdown-toggle"). Dropdown ("toggle"); и $ ("# dropdown-toggle"). click(); должен работать просто отлично http://jsfiddle.net/cvjuxz3g/, убедитесь, что элемент уже находится в DOM перед вызовом сценария – frosdqy

Интересно, когда я вызываю $ («# dropdown-toggle»). dropdown («toggle»); в первый раз, когда я создаю содержимое выпадающего меню, он работает. Но после этого не запускается, когда я обновляю содержимое выпадающего списка и запускаю его из любого места в коде. Единственное, что происходит, это ссылка на активацию раскрывающегося списка, выделенного (цвет становится ярче). –

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

Вы используете загрузочный 3.2. Вы не нуждаетесь в дополнительном JavaScript, чтобы сделать выпадающее меню.

Если он не работает с чистым Bootstrap. Удостоверьтесь, что у вас включен JQuery, а также Bootstrap. JQuery НЕОБХОДИМО для работы.

<script type="text/javascript" src="js/jquery-2.1.1.js"></script> 
<script type="text/javascript" src="js/bootstrap.min.js"></script>

источник

2014-11-10 14:21:39

Кажется, вы не полностью изучили весь вопрос, прежде чем дать этот ответ. Вопрос заключается в том, чтобы открыть раскрывающийся список явно с помощью javascript-кода. –

@ BarışÜrüm Бутстрап содержит код Javascript. Чтобы добавить дополнительный код для того, что уже существует, избыточно. Пока ваши классы правильно названы, а html структурирован правильно, фреймворки Javascript будут работать правильно. –

-1

Я полагаю, что ваша функция обновления находится внутри обработчика события link/button. Попробуйте добавить return false; в конце функции, чтобы браузер не выполнял действие по умолчанию для этой кнопки/кнопки.

$("#button").click(function() { 
    ... 
    for (var cnt = 0; cnt < this.AssignedRooms.length; cnt++) { 
     var litext = ""; 
     litext += "<div class='assigned-item' id='assigned-room" + this.AssignedRooms[cnt].RoomNo + "' " + "building-no='" + this.AssignedRooms[cnt].BuildingNo + "'" + " floor-no='" + this.AssignedRooms[cnt].FloorNo + "' room-no='" + this.AssignedRooms[cnt].RoomNo + "'>"; 
     litext += (this.EnableCampus ? "<span class='small bold'>Building </span><span class='small'>" + this.AssignedRooms[cnt].BuildingNo + ", </span>" : ""); 
     litext += "<span class='small bold'>Floor </span><span class='small'>" + this.AssignedRooms[cnt].FloorNo + "</span>, "; 
     litext += "<span class='small bold'>Room </span><span class='small'>" + this.AssignedRooms[cnt].RoomNo + "</span>"; 
     litext += "</div>"; 
     litext += "<div class='assigned-cancel' id='assigned-room-cancel" + this.AssignedRooms[cnt].RoomNo + "' " + "building-no='" + this.AssignedRooms[cnt].BuildingNo + "'" + " floor-no='" + this.AssignedRooms[cnt].FloorNo + "' room-no='" + this.AssignedRooms[cnt].RoomNo + "'>"; 
     litext += "<img src='../../PickContent/img/cancel-small.png' title='Cancel Room " + this.AssignedRooms[cnt].RoomNo + "'/>"; 
     litext += "</div>"; 
     html += "<li class='assigned-list-item'>" + litext + "</li>"; 
    } 

    $("#assigned ul.dropdown-menu").html(html); 

    if (full) { 
     $("#dropdown-toggle").dropdown("toggle"); 
    } 
    ... 

    return false; //Add this line 
});

источник

2014-11-10 15:34:13 frosdqy

Bootstrap 3.2.0: Открыть раскрывающееся меню с javascript

ответ

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