Very good, I have a Boostrap menu bar that is partly generated with a javascript function, the result of the function I put it in a div of the bar called menuCategories. My intention is to add functionality to it data-hover="dropdown" so that when the cursor passes, the actions are displayed.
The menuCat(); function is called from $(document).ready
This function generates the options of the bar and shows the links of the corresponding subcategories. This function on the one hand takes the names of the categories, and on the other hand, the submenucat function, generates the drop-down of each category. The idea is that to go through the category, the corresponding subcategories are displayed. All this does well by clicking.
function menuCat(){
$.ajax ({
//Grupo Categorias
url: "php/AgrApp/grp_cat.php",
type: "POST",
success: function(data){
//Aqui tengo el json con todas las categorias
objJsonCat=JSON.parse(data);
subMenuCat("", function(idSubCategoria){
var menuCate='<ul class="nav navbar-nav">';
$.each(objJsonCat, function(i, categoria) {
menuCate+='<li class="dropdown">'+
' <a class="dropdown-toggle"'+
' data-toggle="dropdown"' +
' data-hover="dropdown">' +
' <b>'+categoria.name+'</b>' +
' <b class="caret"></b>'+
' </a>'+
' <ul class="dropdown-menu">';
indice=0;
$.each(idSubCategoria, function(j, subCategoria) {
//Hago un for desde 0 hasta la longitud de esa Subcategoria.
if (subCategoria.grp_cat==categoria.id){
menuCate+= '<li>'+
' <a data-toggle="collapse"' +
' data-target=".navbar-collapse.in"' +
' onClick="categorias('+categoria.id+','+indice+');'+ ' return false;"' +
' data-toggle="collapse"' +
' data-target="navbar-collapse.in">' +'
' <b>'+subCategoria.name+'</b>'+
' </a>'+
'</li>'+
//Pinto la subCategoria
'<li role="separator" class="divider"></li>';
//le paso el indice a la funcion categorias para
//que sepa cual tiene que activar
indice++;
}
});
menuCate+='</ul> </li>';
});
$('#menuCategorias').html(menuCate);
});
}
});
}<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-hover-dropdown/2.2.1/bootstrap-hover-dropdown.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
<!--
El logotipo y el icono que despliega el menú se agrupan
para mostrarlos mejor en los dispositivos móviles
-->
<div class="navbar-header">
<button type="button"
class="navbar-toggle"
data-toggle="collapse"
data-hover="dropdown"
data-target=".navbar-ex1-collapse">
<span class="sr-only">
Desplegar navegación
</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a onClick="categorias(); return false;"
class="navbar-brand"
href="#">
<b>
<span class='glyphicon glyphicon-th-list'></span>
Categorías
</b>
</a>
</div>
<!--
Agrupar los enlaces de navegación, los formularios y cualquier
otro elemento que se pueda ocultar al minimizar la barra
-->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<div class="cursor"
id="menuCategorias">
</div>
<!--
Aqui es donde se carga el contenido el menu de gategorias
-->
</ul>
<div class="navbar-form navbar-right"
role="search">
<div class="form-group">
<input type="text"
id="txtConvBus"
class="form-control"
placeholder="Busqueda por palabras" />
</div>
<button id="btnBusqueda"
class="btn btn-primary">
Ir
</button>
</div>
</div>
</nav>