1
4

4 に答える 4

2

メニュー項目のスタイルを切り替えて展開するためのjavascriptonclick（または同様のもの）があると仮定します。メニュー項目にIDがある場合、トリガーされたJSで、オープン/クローズステータスのテストを使用し、必要に応じてCSS項目をオーバーライドまたはリセットします

document.getElementById("menuItem").style.backgroundImage = "url(black_t_arrow.gif)";
于 2013-01-23T05:24:38.577 に答える
2

折りたたみ用と展開用の 2 つの CSS クラスが必要です。

HTML:

<a id="expander" class="close" href="#">Click to collapse/expand</a>

CSS:

.close { background-image: url("/images/collapsed.gif"); }
.open { background-image: url("/images/expanded.gif"); }

JavaScript:

/* Useful for multiple CSS classes. */
$('a#expander').click(function(e){
    e.preventDefault();
    var exp = $(this);
    if (exp.hasClass('open')) {
        exp.removeClass('open').addClass('close');
    } else {
        exp.removeClass('close').addClass('open');
    } 
});

また：

CSS:

a#expander { background-image: url("/images/collapsed.gif"); } /* set default image */ 
.open { background-images: url("/images/expanded.gif"); }

JavaScript:

/* Swap in/out the class open to override the default background. */
$('a#expander').toggleClass('open');
于 2013-01-23T05:40:43.540 に答える
2

ここで説明されているように、これは CSS スプライトの仕事のようです。ソリューション用の私の jsFiddle はhereです。

基本的な考え方は、両方の矢印を含む単一の画像を作成することです。この画像を背景として使用しているため、<a>タグ コンテンツを埋める画像の部分のみが表示されます。ある画像と別の画像を切り替えるには、cssbackground-positionプロパティを変更するだけです。

DOM 対応関数の内部:

$(".expended_div a").on("click", function() {
   if(this.css("background-position") == "0px -8px")
    this.css("background-position", "0px -31px");
   else
    this.css("background-position", "0px -8px");
 });

これを機能させるには、「black_t_arrow.gif」を次のように変更します。

アロースプライト

これの素晴らしいところは、2 番目の画像の読み込み時間がないことです。既に表示されていますが、背景画像がコンテンツ領域よりも大きいため、非表示になっています。

于 2013-01-23T06:00:05.527 に答える
1

CSSについてはわかりませんが、jquery uiフレームワークを使用している場合は、次のリンクが役立ちます

http://jqueryui.com/accordion/

次のプロパティを使用する必要があります

$( "#accordion" ).accordion({ collapsible: true });

次のコードを試してください:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />

<script>
$(function() {
$( "#accordion" ).accordion({ collapsible: true });
});
</script>

</head>
<body>
 <div id="accordion">

   <h3>Section 1</h3>
   <div>
   <p>Welcome</p>
   </div>

   <h3>Section 2</h3>
   <div>
   <p>Hi</p>
   </div>

   <h3>Section 3</h3>
   <div>
   <p>Hello</p>
   </div>

   <h3>Section 4</h3>
   <div>
   <p>How are you?</p>
   <p>Have a nice day.</p>
   </div>

</div>
</body>
</html>

http://api.jqueryui.com/accordion/にある「Accordian」のドキュメントも確認してください。

于 2013-01-23T05:10:34.000 に答える