Question

我想把手风琴插件的 border 的优点放在“ NONE ”上，但我找不到负责这样做的代码。

谢谢：）

有截图： My example

我想在“border：none”上设置黄色边框。我还有另外一个问题，那就是当我选择其中一个单选按钮时，我无法改变我的选择并选择另一个，就像其他的一样被禁用。你有什么想法吗？谢谢：）

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

Answer 1

将以下样式添加到页面中，并且不会显示边框。

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

要解决单选按钮问题，请将event: "mouseup"添加到您的手风琴JavaScript函数中。

请参阅Working jsfiddle demo

Answer 2

看一下插件生成的代码。来自http://jqueryui.com/demos/accordion/主题标签：

使用jQuery UI CSS Framework类进行示例标记

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

这将为您提供要设置样式的元素的类。

Answer 3

尝试将其放在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>

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

删除Accordion UI上的边框

3 个答案: