2016-11-23 6 views
0

У меня есть проблемы с развитием, все это я получаю список таким образомОтдельные уль согласно элементу CSS

это мой код ASPX

<style> .level1 { font-weight:bold !important; } </style> <asp:Menu ID="MenuHijosPro" runat="server" Width="100%" StaticDisplayLevels="2" > </asp:Menu> 

Это простые HTML результат

<div id="MenuHijosPro" style="float: left;"> 
    <ul class="level1 static" tabindex="0" role="menu" style="position: relative; width: auto; float: left;"> 
    <li role="menuitem" class="static" style="position: relative;"><a class="level1 static" href="Default.aspx" tabindex="-1">CARPETA PEDAGOGICA</a></li> 
    <li role="menuitem" class="static" style="position: relative;"><a class="level2 static" href="frm_ListaSilabo.aspx" tabindex="-1">Silabo</a></li> 
    <li role="menuitem" class="static" style="position: relative;"><a class="level2 static" href="frm_AsistenciaAsignatura.aspx" tabindex="-1">Asistencia Alumno</a></li> 
    <li role="menuitem" class="static" style="position: relative;"><a class="level2 static" href="Frm_Reg_Notas.aspx" tabindex="-1">Notas Alumno</a></li> 
    <li role="menuitem" class="static" style="position: relative;"><a class="level2 static" href="frm_NotaFinal.aspx" tabindex="-1">Acta de Notas</a></li> 
    <li role="menuitem" class="static" style="position: relative;"><a class="level1 static" href="Default.aspx" tabindex="-1">CONTROL DE ASISTENCIA </a></li> 
    <li role="menuitem" class="static" style="position: relative;"><a class="level2 static" href="frm_EjecucionHoras.aspx" tabindex="-1">Mi Asistencia</a></li> 
    </ul> 
</div> 

Но я хочу создать Аккордеон с бутстрапом, отделяя списки, используя заголовок, первым пунктом «level1», а затем содержимое, которое появляется позже, до следующего «уровня1»

enter image description here

Надеюсь, вы можете мне помочь. Спасибо заранее за вашу помощь.

+0

Вы пробовали использовать класс коллапс? – Kiogara

+0

Если вы попытаетесь поместить css коллапса, но используемая система генерирует этот тип ответа в этом формате, это не дает места для персонализации кода выхода. –

+0

Значит, вы не можете изменить HTML? –

ответ

0
  • Это что-то похожее на то, что вы ищете?
  • Я следовал exaample от w3schools

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
<div id="MenuHijosPro" class= "row"> 
 
<div class = "col-md-12"> 
 
    <button type="button" class="btn btn-info col-md-12" data-toggle="collapse" data-target="#demo">CARPETA PEDAGOGICA</button> 
 
    <div id="demo" class="collapse class= "col-md-12"> 
 
    <li role="menuitem" class="static" ><a class="level2 static" href="frm_ListaSilabo.aspx" tabindex="-1">Silabo</a></li> 
 
    <li role="menuitem" class="static" ><a class="level2 static" href="frm_AsistenciaAsignatura.aspx" tabindex="-1">Asistencia Alumno</a></li> 
 
    <li role="menuitem" class="static" ><a class="level2 static" href="Frm_Reg_Notas.aspx" tabindex="-1">Notas Alumno</a></li> 
 
    <li role="menuitem" class="static" ><a class="level2 static" href="frm_NotaFinal.aspx" tabindex="-1">Acta de Notas</a></li> 
 
</div> 
 
</div> 
 
<div class = "col-md-12"> 
 
<button type="button" class="btn btn-info col-md-12" data-toggle="collapse" data-target="#demo1">CONTROL DE ASISTENCIA</button> 
 
<div id="demo1" class="collapse class= "col-md-12"> 
 
    <li role="menuitem" class="static"><a class="level2 static" href="frm_EjecucionHoras.aspx" tabindex="-1">Mi Asistencia</a></li> 
 
</div> 
 
</div> 
 
</div> 
 
</div> 
 
</body> 
 
</html>

+0

Да, я хочу иметь что-то вроде этого, но мой код выглядит следующим образом: ' <жерех: меню ID = "MenuHijosPro" RUNAT = "сервер" Ширина = "100%" StaticDisplayLevels = "2"> ' Тогда при отправке генерировать меня посылает в результате чего я публикую в мой вопрос. –

+0

Прошу прощения, я не понимаю, что вы знаете. Не могли бы вы объяснить подробно. Измените свой вопрос, чтобы объяснить, что вы сделали и что вы ожидаете. благодаря –