DÉSACTIVER ADBLOCK

ADBlock bloque du contenu sur le site

ADBlock errore

bootstrap Gliphicon glyphicon-plus annidato

Question

ho una lista che si popola quando la pagina viene caricata . questa lista ha dei figli e i figli hanno a loro volta dei figli anch'essi . ho bisogno che questi usano Gliphicon glyphicon-plus e che la lista si espanda solo da parte dell'utente .

Solution

ciao, in base a quello che mi hai scritto ti invio questo pezzo di codice come esempio :


<style> . list-group . list-group-root { padding : 0 ; overflow : nascosto ; } . list-group . list-group-root . list-group { margin-bottom : 0 ; }
       
           
           
       
       
           
       

        . list-group . list-group-root . list-group-item { border-radius : 0 ; larghezza del bordo : 1px 0 0 0 ; }
           
               
       

        . list-group . list-group-root > . list-group-item : first-child { border-top-width : 0 ; }
           
       

        . list-group . list-group-root > . list-group > . list-group-item { padding-left : 30px ; } 
           
       

        . list-group . list-group-root > . elenco-gruppo > . elenco-gruppo > . list-group-item { padding-left : 45px ; } 
           
       

        . list-group-item . glyphicon { margin-right : 5px ; } </style> <div class = "list-group list-group-root well" >
           
       


    @for (int i = 1; i <10; i ++)
    {
        <a href = "#item-@(i)" class = "list-group-item" data-toggle = "collapse"> <span class = "glyphicon glyphicon-plus" style = " font-family : Verdana , Helvetica , sans-serif ; font-size : 10pt ; " aria-hidden = " true " > </span> Item @ (i)
        </a> <div class = " list-group collapse "id = "item - @ (i)" > 
               
         
            @for (int j = 1; j <4; j ++)
            {
                <a href = "#item-@(i)-@(j)" class = "list-group-item" data-toggle = "collapse"> < arco class = "glyphicon glyphicon-plus" style = " font- famiglia : Verdana , Helvetica , sans-serif ; font-size : 10pt ; " aria-hidden = " true " > </span> Item @ (i) - @ (j) </a> <div class = " list- collasso del gruppo "id = "elemento - @ (i) - @ (j)" 
                       
               
                  >
                    @for (int m = 1; m <3; m ++)
                    {
                        <a href = "#" class = "list-group-item"> Articolo @ (i) - @ (j) - @ (m) </a> 
                    }
                </div>
            }
        </div>
    }
</div>
@section scripts {
    <script>
        $ ( documento ). ready ( function () {
            $ ( '.list-group-item' ). on ( 'click' , function () { $ ( '.glyphicon' , this ) . toggleClass ( 'glyphicon glyphicon-minus' ) . toggleClass ( 'glyphicon glyphicon-plus' ); }); }); </script>
}   
               


Licensed under: CC-BY-SA with attribution