0

現時点で私がやろうとしているのは、アコーディオンがどこから見出しスタイルを引き出しているのかを把握することです。

これは、アコーディオンヘッダーのデフォルトとして持っていたものです:

<h3>Header for Accordion Slide Goes Here</h3>

ただし、h3 スタイルへの参照は見つかりませんでした。

必要な設定で 1 つのページに複数のアコーディオンを作成したい場合は、次を使用しました。

$(function() {

        $("#accordion").accordion({ header: "h3", active: false, collapsible: true });

ここでも h3 を使用しました。

スタイルセクションの最後にこれを追加しようとしました：

h3{ font-weight:bold; font-size:1.5em; }

しかし、それは何も影響しませんでした。(何らかの理由で、私がこれを使用しているサイトでは、HTML からスタイルが完全に削除されています。)

私が望むのは、上部の例ではなく、下部の例のようにヘッダーを変更することです。

http://i.imgur.com/h3aKIZw.jpg

つまり、より大きく、読みやすくする必要があります。

私が抱えているもう1つの問題は、スライドが開いたときに、そこにテキスト付きの画像があることです。右下から始まるデフォルトではなく、テキストを画像の右上に揃えて表示する必要があります。

以前は、これを行うために次を使用していました。

.accordion img{
    display:inline-block;
    width:180px;
    height:125px;
    vertical-align:top;
    margin-right:10px;
}
.accordion .taxt{
    display:inline-block;
    width:280px;
}

しかし、これは、この新しい JQueryUI アコーディオンに同じものを適用できるように、CSS をどこに適応させるべきか (または可能であれば) わからないところです。

現在、html でどのように表示されるかを次に示します。

<div id="accordion">
<h3>Tutor-led Learning</h3>
<div><img src="http://i.imgur.com/30qxeXe.jpg" height="125" width="180" /> <taxt>To view the tutor-led course information, please click <a href="LINK HERE">here</a></taxt></div>
<h3>E-Learning</h3>
<div><img src="http://i.imgur.com/mVynNfO.jpg" height="125" width="180" /> <taxt>To view the E-Learning course information, please click <a href="LINK HERE">here</a></taxt></div>
</div>

編集: JSFiddle - http://jsfiddle.net/jz8Bz/

奇妙なことに、フィドルのヘッダーははるかに良く見えます...

うまくいけば、必要な情報はこれですべてです。これは長い投稿になりました:)

助けてくれてありがとう、

ジョン

編集：フォントサイズの一時的な回避策、ヘッダータグで style="font-size:20px" を使用しました...理想的ではありませんが、うまくいきますか？JSFiddle が、私が使用しているサイトとは異なるように見える理由については、まだ混乱しています。

4

1 に答える 1