2012-04-01 93 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> 

我不認爲你必須在標題中使用單選按鈕 - 標題必須僅用於顯示標題和用於點擊時打開和關閉手風琴元素。