0

我是一名平面设计师，我一直在浏览 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。

你有什么解决方案让它工作吗？我非常感谢先进。

4

0 回答 0