添加幻灯片以切换

时间:2015-04-13 14:02:31

标签: javascript toggle slide

我正在尝试为我的切换脚本添加幻灯片效果

<script>
    function clickitems() {
        // action 1
        if( document.getElementById('spoiler2').style.display=='none' ){
            document.getElementById('spoiler2').style.display='block';
        }
        else{
            document.getElementById('spoiler2').style.display='none';
        };
        // action 2
        if( document.getElementById('spoiler').style.display=='block' ){
            document.getElementById('spoiler') .style.display='none';
        }
    }
</script>

但到目前为止没有成功,任何人都可以帮助我吗?非常感谢

元素剧透和扰乱2是简单的div元素

<div id="spoiler" style="width:300px;height:100%;display:none;"> Txt and image Content</div>
<div id="spoiler2" style="width:300px;height:100%;display:none;"> Txt and image Content</div>

按钮为<a class="button" onclick="clickitems()">Items</a>

是的,我可以使用段落标记而不是链接

1 个答案:

答案 0 :(得分:0)

好的,到目前为止我得到了这个,

用于关闭另一个和Jquery打开元素的JavaScript,同时切换所选元素

<script>
    function clickitem() {

        if( document.getElementById('spoiler').style.display=='block' ){
            document.getElementById('spoiler') .style.display='none';
        }
    }
</script> </p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("#flip").click(function(){
        $("#spoiler2").slideToggle("slow");
    });
});
</script>