2012-04-01 90 views
0

我想把边境礼手风琴插件的“NONE”,但我不觉得这是负责这样做的代码。删除接壤手风琴UI

谢谢:)

有一个截图: My example

我想设置的黄色边框上的 “边界:无”。 而我还有另一个问题,那就是当我选择其中一个单选按钮时,我无法更改我的选择并选择另一个,就像其他人被禁用一样。 你有什么想法吗? 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> 

回答

2

将以下样式添加到您的页面并且边框不会出现。

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

要解决的单选按钮问题,添加event: "mouseup"到你的手风琴JavaScript函数。

请参阅Working jsfiddle demo

+0

很多!有用 !! :D – Copernic 2012-04-04 11:49:54

+0

请选择其中一个被选中时禁用的单选按钮? – Copernic 2012-04-04 11:51:06

+0

将'event:“mouseup”'添加到手风琴功能来解决单选按钮问题。看到我编辑的答案和jsFiddle演示。 – neo108 2012-04-04 22:55:43

0

看看插件生成的代码。从http://jqueryui.com/demos/accordion/主题化标签:

样品标记与jQuery UI CSS框架类

<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> 

这将会给你你想要的风格元素的类。

+0

Thks !!我现在要试试.. – Copernic 2012-04-01 23:51:25

+0

边框不会改变... – Copernic 2012-04-02 00:30:10

+0

如果您可以发布相关章节的代码,那么将更容易找出发生了什么。谢谢。 – neo108 2012-04-02 06:06:53

0

尝试把这个在你的CSS文件的底部:

h3.prelevement_auto_p {border:0px;} 

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

如果还是不行,请尝试内嵌样式:

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

我不认为你必须在标题中使用单选按钮 - 标题必须仅用于显示标题和用于点击时打开和关闭手风琴元素。