自定义 Jquery UI 手风琴

Question

当我使用 Accordion 时，整个页面都会显示。 我想调整显示器的宽度和高度。

我希望我的手风琴的宽度如http://www.i-marco.nl/weblog/jquery-accordion-3/所示

上面链接中的示例在 JQuery 中完成....我不想使用它...我想自定义 Jquery UI 中可用的内容

Answer 1

您的“显示正在整个页面中”？ 您是否尝试为您的 div 提供 css 宽度和高度？ 否则，您应该发布代码，因为您的问题含糊不清。

Answer 2

您可以创建自定义手风琴：

 $('.accordionOm').next().hide(); $(".opened").next().show(); $('.accordionOm').click(function() { if($(this).hasClass("opened") == true) { $(this).next().slideUp("slow"); $(this).removeClass('opened'); } else { $(".opened").next().slideUp("slow"); $(".opened").removeClass("opened"); $(this).addClass('opened'); $(this).next().slideDown("slow"); } });

 .accordionOm { position:relative; padding:10px 0 10px 30px; margin:0; font:300 18px 'Oswald', Arial, Helvetica, sans-serif; cursor:pointer;}.accordionOm:hover { color:#000;}.accordionOm:before,.accordionOm:after { content:""; position:absolute; background:#333; display:inline-block;}.accordionOm:before { width:20px; height:2px; left:0; top:22px;}.accordionOm:after { width:2px; height:20px; left:9px; top:13px; transition:transform.5s; transform:rotate(0);}.accordionOm.opened:after { transform:rotate(90deg);}.accordionOm + div { border-left:4px solid #999; padding:0 15px; margin-left:8px; font:13px 'Open Sans', Arial, Helvetica, sans-serif; color:#666;}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h4 class="accordionOm opened">Accordian heading</h4> <div> <p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p> </div> <h4 class="accordionOm">Accordian heading</h4> <div> <p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p> </div> <h4 class="accordionOm">Accordian heading</h4> <div> <p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p> </div> <h4 class="accordionOm">Accordian heading</h4> <div> <p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p> </div>