Question

我的代码陷入了一些混乱，我希望你们能用一个聪明的主意帮助我。

所以，我正在使用一个html页面并使用scriptaculous来使用切换效果显示和淡出一些div。事情是，为了实现这一点，你当然必须在你的div中使用style =“display：none”，但这会给我的幻灯片显示一个问题。让我告诉你它的外观：

- 我的菜单

        <li>
            <ul>
                <li><a href="#" onclick="Effect.toggle('aboutDiv', 'appear'); return false;"></a>
                </li>
                <li><a href="#" onclick="Effect.toggle('missionDiv', 'appear'); return false;"></a>
                </li>
                <li><a href="#" onclick="Effect.toggle('portfolioDiv', 'appear'); return false;"></a>
                </li>
                <li><a href="#" onclick="Effect.toggle('contactDiv', 'appear'); return false;"></a>
                </li>
            </ul>
        </li>

我的div

<div id="portfolioDiv" style="display: none">
<a href="#" class="close" onclick="Effect.toggle('portfolioDiv', 'appear'); return false;">&#10006;</a>
    <!-- 630px X 430px -->
    <div id="slideDiv">
        <ul>
            <li>
                <img src="image/img1.jpg" alt="" /></li>
            <li>
                <img src="image/img2.jpg" alt="" /></li>
            <li>
                <img src="image/img1.jpg" alt="" /></li>
            <li>
                <img src="image/img2.jpg" alt="" /></li>
            <li>
                <img src="image/img1.jpg" alt="" /></li>
            <li>
                <img src="image/img2.jpg" alt="" />
            </li>
        </ul>
    </div>
</div>

- CSS

#portfolioDiv
{
    position: absolute;
    height: 700px;
    width: 430px;
    left: 3%;
    top: 16%;
    border: 1px solid red;
    overflow: hidden;      
}

#slideDiv
{
    position: absolute;
    height: 630px;
    width: 430px;
    top: 70px;
    border: 1px solid black;
    overflow: hidden;
    margin: 0;
    padding: 0px;
}

- 问题

- 我正在使用Horinaja幻灯片。

当我在 portfolioDiv 上使用style="display: none"时，幻灯片显示不起作用。当我在 slideDiv 上使用style="display: none"时就可以了。我似乎无法理解造成这个问题的原因。

- 尝试过的解决方案

为了尝试解决这个问题，我想分开2个div（ portfolioDiv 和 slideDiv ），然后单独放置它们，而不是将slideDiv放在portfolioDiv中，但是我需要在我的菜单中使用带有效果的多功能。在我的菜单中使用onclick，但我无法这样做，因为我基本上不知道如何。

希望你能以某种方式帮助我，谢谢。

Answer 1

我解决了它使用：

<a href="#" onclick="Effect.multiple(['portfolioDiv','slideDiv'],function(el){Effect.toggle(el,'appear');});">

script.aculo.us切换显示在多个div上

1 个答案: