2012-04-01 14 views
0

ich die Grenze Schicklichkeit des Akkordeons Plugin auf „NONE“ setzen wollen, aber ich finde nicht den Code, der das zu tun verantwortlich ist.Löschen Border auf Akkordeon UI

Thanks :)

gibt es einen Screenshot: My example

Ich möchte auf den gelben Rahmen setzen "border: none". Und ich habe ein anderes Problem, das ist, dass, wenn ich einen der Radioknöpfe auswähle, ich meine Wahl nicht ändern und einen anderen wählen kann, als ob andere deaktiviert sind. Haben Sie irgendeine Idee? Thks :)

<script type="text/javascript"> 
     $(function(){ 
     // Accordion 
     $("#accordion").accordion({ 
      autoHeight: false, 
      navigation: true, 
      header: "h3" }); 
     }); 
    </script> 


    <form id="accordion" action="commande_chequier_succes.html" method="post"> 


     <div class="prelevement_auto"> 
     <h3 class="prelevement_auto_p"> 
      <input type="radio" name="paiement" /><strong>Prélèvement automatique</strong> 
     </h3> 
     <div class="target1"> 
      <p class="xx">J'autorise le prélèvement sur mon compte bancaire :<br/><strong>XXXXXXX XXXXXXX XXXX XX</strong></p> 
      <p> 
      <input class="target_submit" name="prelevement_auto_submit" type="submit" value="COMMANDER" /> 
      </p> 
     </div> 
     </div> 


     <div class="cesu"> 
     <h3 class="cesu_p"> 
      <input type="radio" name="paiement" /><strong>CESU</strong> 
     </h3> 
     <div class="target3"> 
      <p> 
      <strong>Frais de traitement 3.90 euros</strong><br/>Pour des raisons de sécurité, nous vous demandons de nous retourner vos CESU uniquement 
       par Lettre Recommandée Avec Accusé de Réception (LRAR) à l'adresse suivante :<br/><br/> 
       France Ménage 128 rue de la Boétie 75008 Paris<br/><br/> 
       N'oubliez pas de cocher la case assurance R3 dans votre LRAR qui vous permettra de vous faire rembourser vos CESU à hauteur de 458 euros maximum. 
      </p> 
      <input class="target_submit" type="submit" name="cesu_submit" value="COMMANDER" /> 
     </div> 
     </div> 


    </form> 

Antwort

2

Fügen Sie Ihrer Seite den folgenden Stil hinzu, und der Rahmen wird nicht angezeigt.

<style> 
h3 { 
    outline:none; 
} 
</style> 

das Radio-Buttons Problem zu beheben, fügen Sie event: "mouseup" zu Ihrem Akkordeon JavaScript-Funktion.

Siehe Working jsfiddle demo

+0

Thks viel !! Es klappt !! : D – Copernic

+0

Bitte Was ist mit den Radio-Tasten, die deaktiviert sind, wenn einer von ihnen ausgewählt ist? – Copernic

+0

Fügen Sie '' event: "mouseup" 'der Akkordeonfunktion hinzu, um das Radio Button Problem zu beheben. Sehen Sie meine bearbeitete Antwort und jsFiddle Demo. – neo108

0

Werfen Sie einen Blick auf den Code durch das Plugin erzeugt. Von http://jqueryui.com/demos/accordion/ Thematisierung tab:

Beispiel Markup mit jQuery UI CSS Framework-Klassen

<div class="ui-accordion ui-widget ui-helper-reset"> 
    <h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top"> 
    <span class="ui-icon ui-icon-triangle-1-s"/> 
    <a href="#">Section 1</a> 
    </h3> 
    <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active"> 
     Section 1 content 
    </div> 
    <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all"> 
    <span class="ui-icon ui-icon-triangle-1-e"/> 
    <a href="#">Section 2</a> 
    </h3> 
    <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom"> 
    Section 2 content 
    </div> 
    <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all"> 
    <span class="ui-icon ui-icon-triangle-1-e"/> 
    <a href="#">Section 3</a> 
    </h3> 
    <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom"> 
    Section 3 content 
    </div> 
</div> 

Dies gibt Ihnen die Klassen für die Elemente, die Sie Stil wollen.

+0

Thks !! Ich werde das jetzt versuchen .. – Copernic

+0

der Rand ändert sich nicht ... – Copernic

+0

Es wird einfacher herauszufinden, was los ist, wenn Sie Ihren Code der relevanten Abschnitte veröffentlichen können. Vielen Dank. – neo108

0

Versuchen Sie, diese Ihrer CSS-Datei am Ende zu setzen:

h3.prelevement_auto_p {border:0px;} 

oder

h3.ui-accordion-header {border:0px;} 

Wenn das nicht funktioniert, versuchen Sie Inline-Styling:

<form id="accordion" ....> 
    <h3 class="prelevement_auto_p" style="border:0px;">...</h3> 

Ich glaube nicht, dass Sie Radioknöpfe in der Überschrift verwenden müssen - die Überschrift muss nur zum Anzeigen eines Titels und verwendet werden zum Öffnen und Schließen von Akkordeonelementen beim Anklicken.

Verwandte Themen