Accordianを使用すると、ページ全体が表示されます。私はディスプレイの幅と高さを調整したい。私は上記のリンクでhttp://www.i-marco.nl/weblog/jquery-accordion-3/Jquery UIのカスタマイズAccordian
例に示すように、私のアコーディオンの幅がしたい
はjQueryの中で行われている....私はそれを使用したくない...私はで利用可能なものをカスタマイズしたいですJqueryのUI
あなたの「ディスプレイはページ全体に入っていますか？あなたのdivにCSSの幅と高さを与えてみましたか？ そうでなければ、あなたの質問があいまいなのでコードを投稿してください。
カスタムアコーディオンを作成することができますあいまいさのため申し訳ありません
\t $('.accordionOm').next().hide();
\t $(".opened").next().show();
\t $('.accordionOm').click(function()
\t {
\t \t if($(this).hasClass("opened") == true)
\t \t {
\t \t \t $(this).next().slideUp("slow");
\t \t \t $(this).removeClass('opened');
\t \t }
\t \t else
\t \t {
\t \t \t $(".opened").next().slideUp("slow");
\t \t \t $(".opened").removeClass("opened");
\t \t \t $(this).addClass('opened');
\t \t \t $(this).next().slideDown("slow");
\t \t }
\t });.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>
\t <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>
\t <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>
\t <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>
\t <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>
を...私は、フロントエンドのWeb開発に非常に新しいです。私の質問への答えは些細なものかもしれません。 以下のサイトからソースコードをダウンロードしました。http：//jqueryui.com/demos/accordion/ アコーディオンディスプレイの幅は、私のウェブページの幅と同じです。どのように私はそれを減らし、コンパクトにして、アコーデオンが私のWebページの左隅にのみ現れるようにすることができますか？ jqueryui.com/demos/accordion/しかし、http://www.i-marco.nl/weblog/jquery-accordion-3のような表示があります –
この疑問を無視してください...それは非常に簡単です....私は回答。以下の変更で十分です。 .ui-accordion {width：40％; float：右} –