Wie man einen chevron links/unten in gsp grails dynamisch ändert

Ich versuche einen Weg zu finden, den lnr-chevron-links zu lnr-chevron-down zu ändern, wenn der Benutzer in den Chevron klickt und die Ansicht erweitert.Wie man einen chevron links/unten in gsp grails dynamisch ändert

Dies ist der Code, den ich in der gsp haben und funktionieren nicht:

<div class="col-xs-2 col-sm-1 text-right"> 
<div data-toggle="collapse" data-parent="#accordion" href="#collapse${i}" class="lnr lnr-chevron-left collapsed lnr-chevron-down">

AKTUALISIERT

Dies ist letzte Code, ich versuche ... .

<body> 
<div class="col-xs-2 col-sm-1 text-right"> 
<div data-toggle="collapse" id="changeChevron" data-parent="#accordion" href="#collapse${i}" class="lnr lnr-chevron-left collapsed"></div>          
</div> 

<script type = "text/javascript"> 
     var clicked=false; 
     $('#changeChevron').click(function(){ 
     clicked=true; 
     }); 

     if (clicked) { 
      $('#changeChevron').removeClass('lnr lnr-chevron-left').addClass('lnr lnr-chevron-down'); 
     } else { 
      $('#changeChevron').removeClass('lnr lnr-chevron-down').addClass('lnr lnr-chevron-left'); 
     } 
</script> 
</body>

Vielen Dank im Voraus

Quelle

2016-06-03 S.P.

Vielleicht bin ich zu spät, aber wenn Sie eine CSS haben, können Sie die CSS wie dies außer Kraft setzen:

.panel-heading .accordion-toggle.collapsed:after { 
    /* symbol for "collapsed" panels */ 
    content: "\e875"; 
    float: right; 
} 

.panel-heading .accordion-toggle:after { 
    /* symbol for "opening" panels */ 
    font-family: 'Linearicons-Free'; 
    content: "\e874"; 
    float: right; 
    font-size:19px; 
}

Quelle

2016-06-08 09:38:27 Simpson

versuchen, etwas wie folgt aus:

<div class="col-xs-2 col-sm-1 text-right"> 
<div data-toggle="collapse" id="myId" data-parent="#accordion" href="#collapse${i}" class="lnr lnr-chevron-left collapsed">

Dies ist ein Beispiel und es ist alles weg von der Spitze meinen Kopf als in nicht getestet weg, aber es wird Ihnen die Idee

<g:javascript> 
////$('.lnr-chevron-left').on('click', function() { 
$('#myId').on('click', function() { 
$(this).removeClass('lnr-chevron-left').addClass('lnr-chevron-down'); 
event.stopPropagation(); 
}); 
</g:javascript>

Sie werden dann muss es wieder ändern, wenn der Benutzer nicht mehr es

anstatt also klickt man so etwas versuchen könnte:

<g:javascript> 
var clicked=false; 
$('#myId').click(function(){ 
clicked=true; 
}); 

if (clicked) { 
    $('#myId').removeClass('lnr-chevron-left').addClass('lnr-chevron-down'); 
} else { 
    $('#myId').removeClass('lnr-chevron-down').addClass('lnr-chevron-left'); 
} 
</g:javascript>

diese Funktion geklickt kann nicht funktionieren, scheint eine viel ordentliche Art und Weise Fokus zu sein:

https://api.jquery.com/focus-selector/

Quelle

2016-06-03 17:58:29 Vahid

persönlich obwohl ich auf diese Art von Ansatz würde http://www.tutorialspoint.com/bootstrap/bootstrap_button_dropdowns.htm und dann ammend oben oder etwas ein wenig Javascript, wie wie es funktioniert zu machen - es ist einfacher, wenn die Hälfte davon bereits fertig ist – Vahid

Hallo @vahid. Ich versuche Ihren Code (mit dem wenn geklickt wird), aber es funktioniert nicht ... und der andere funktioniert auch nicht. Ich füge das g: javascript innerhalb des body-Tags im gsp –

@ D.O hinzu. Es kann sein, dass Sie alle Klassen entfernen müssen und alle zusammen einen neuen Satz hinzufügen müssen, wenn Sie ihn als $ ('# myId') haben. removeClass ('lnr lnr-chevron-left collapsed'). addClass ('lnr lnr -chevron-down '); Wenn das Sinn macht, wenn Sie nach der gesamten Klassenzeile suchen und alles in einem Aufruf entfernen, dann fügen Sie den neuen Satz hinzu, wie Sie es wünschen. Probieren Sie ein einfacheres 1-Klassen-Beispiel (grün/rot) aus, indem Sie die Farben in einem CSS-Stil ändern – Vahid

Wie man einen chevron links/unten in gsp grails dynamisch ändert

Antwort

Verwandte Themen