私はグラフィック デザイナーであり、問題の解決策を見つけるために SO や他のサイトを調べてきましたが、意図した答えが見つかりません。
私はこれを持っています：
div.text
見出しの小さな矢印を使用して、ステータスが開いていることを識別します。画像を使用してステータスを特定することはできましたが、ページの読み込み時に開くことはできません。
これが私の構造です：
<div id="textcontent" class="width_fix">
<p class="link"><a href="#" title"Revenir en haut de la page">haut de la page</a></p>
<div class="heading">BIENVENUE
<div class="fleche"></div>
</div>
<div class="text">
<h1>L’INSTITUT SAO</h1>
<br />Confiez votre beauté et votre bien-être aux soins chez Institut São. Pour le visage ou pour le corps, nos programmes professionnels répondent précisément à vos attentes et aux besoins de votre peau. Le résultat : une extraordinaire sensation de détente, une mise en beauté parfaite et un confort absolu.<br /><br />Offrez à votre beauté des soins qui apaisent les sens ! Visage ou corps, soins solaires ou maquillage, les produits à votre disposition transforment votre rituel de beauté en une expérience sans pareille.<br /><br />Modelages bienfaisants ou soins « bien être », programmes anti-cellulite ou cures intensives : les soins pour le corps vous font vivre une extraordinaire parenthèse de détente.<br /><br />À bientôt
</div>
</div>
</div>
これは私のCSSです：
#textcontent {
position: relative;
float: none;
width: 924px;
height: 250px;
text-align: left;
margin: 30px auto auto auto;
display: inline-block;
}
#textcontent div.heading{
position:relative;
font: 16px 'ITCAvantGardeStd-Demi', sans-serif;
color:#FFFFFF;
line-height:30px;
padding: 0px 0px 0px 30px;
cursor: pointer;
width: 830px;
height: 25px;
background:url(../images/menus/menu_welcome-1.png) no-repeat;
}
#textcontent div.heading div.fleche{
color:#000000;
background:url(../images/buttons/fleche_icon.png) no-repeat;
float:right;
margin: 8px 10px; auto auto;
width: 9px;
height: 10px;
}
#textcontent p.link{
font: 10px 'ITCAvantGardeStd-BkObl', sans-serif;
color:#722EA3;
line-height:12px;
margin: 15px 10px 0px auto;
width: 81px;
height: 12px;
float:right;
}
#textcontent p.link a{
text-decoration: none;
}
#textcontent div.text{
font: 12px 'ITCAvantGardeStd-Bk', sans-serif;
color:#000000;
line-height:12px;
margin: 20px 50px auto 30px;
width: 845px;
height: 205px;
}
#textcontent div.text h1{
font: 20px 'ITCAvantGardeStd-Demi', sans-serif;
color:#722EA3;
line-height:12px;
}
これはページヘッダーの私のスクリプトです：
<!-- load general jquery -->
<script type="text/javascript" src="js/jquery.js"></script>
<!-- load general for small slider -->
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<!-- load collapse expandble DIV -->
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
var $coll = $('.heading');
$coll.click(function() {
var $this = $(this);
$(this).nextUntil('.heading').slideToggle('slow', function() {
$this.next('.text').is(":hidden") ? $this.find('.fleche').css({
'background-position': '0px -10px'
}) : $this.find('.fleche').css({
'background-position': '0px 0px'
});
});
$this.toggleClass("expanded collapsed");
});
$coll.addClass('expanded').click();
});//]]>
</script>
したがって、ページが読み込まれると、div が開き、すぐに閉じますが、...
div.handling
状況に合わせてイメージチェンジ。問題は、クリックしたときだけ開いたり閉じたりしたいということです
div.handling
お知らせするために、私は他のコード、特に 2 つの異なるギャラリーの nivoSlider と jQuery.cycle を使用しています。
それを機能させるための解決策はありますか？事前に多くのことを感謝しています。