0

Hola estoy haciendo un menú con Bootstrap, pero al momento de querer hacer un submenu no abre el submenu, para abrir un menu uso una funcion de onclick, pero en el submenu no surte efecto y cierra el menú. Este es un fragmento de mi codigo

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header container col-md-11 ">
    <ul class="nav navbar-nav">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          Administracion <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li><a href="aparatos.php">Aparatos</a></li>
          <li><a href="cabinas.php">Cabinas</a></li>
          <li><a href="servicios.php">Servicios</a></li>
          <li class="dropdown-submenu">
                    <a href="#">More options</a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Second level link</a></li>
                      <li><a href="#">Second level link</a></li>
                    </ul>
                  </li>
        </ul>
      </li>

.....
3
  • Posiblemente te hace falta llamar al metodo javascript que cumple la funcion en bootstrap Commented el 23 ago. 2017 a las 1:18
  • Deberías poner todo el HTML del menú y el código javascript que tienes para ver donde esta el fallo, aunque en principio el javascript de bootstrap ya debería darte esa funcionalidad.
    – user7176
    Commented el 23 ago. 2017 a las 6:12
  • Gracias por el dato, checare esa parte y si no logro hacerlo funciononar compartire el resto del codigo HTML y el de javascript Commented el 24 ago. 2017 a las 17:34

1 respuesta 1

2

Te dejo un ejemplo

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
	
	<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

1
  • Gracias por el ejemplo, pero ese codigo es el que logro hacer funcionar, lo que no puedo hacer es un segundo menu dentro menu "Dropdown" Commented el 24 ago. 2017 a las 17:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.