Jquery 带按钮的切换幻灯片答案

【问题标题】：Jquery toggleslide with buttonJquery 带按钮的切换幻灯片
【发布时间】：2017-12-23 19:08:42
【问题描述】：

我有一个红色框的 div，显示“hello world”的文本，有 jquery 代码

$(document).ready(function () {
if ($('#box).contents().length == 0))
$('#box').hide();
else
$('#box').show();
    }
});

所做的是，如果这个框不为空，那么它会显示框，如果这个红色框是空的，那么它不会显示它。这个 jquery 很好用。

现在我想在同一个框“id="box”中添加toggleslider，我使用了这个jquery代码..

$(document).ready(function(){
    $("#flip").click(function(){
        $("#box").slideToggle("slow");
    });
});

问题在于它不工作，因为第一个 jquery 代码崩溃了。只有其中一个可以正常工作，不能同时使用。

唯一可行的方法是合并在一起，我喜欢的是在加载页面时，如果红色框不为空，则显示红色框，如果为空则不显示框，同时有用户单击的选项按钮向上和向下滑动该红色框。

见jsfiddle

【问题讨论】：

标签： jquery toggle hide show

【解决方案1】：

试试这个代码：

$(document).ready(function () {
    if($('#box').contents().length == 0){
        $('#box').hide();
    }else{
        $('#box').show();
    }
});

$(document).ready(function(){
    $("#click").click(function(){
        $("#box").slideToggle("slow");
    });
});

#box{
    width:100%;
    height:100%;	
    background-color:red;
    color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>



<div id="box">Hello World</div>
<div id="click">click me</div>

【讨论】：

【解决方案2】：

那里有很多语法错误... 举个例子看看这个：$('#box).contents().length。您没有关闭分隔符中的引号。它应该是： $('#box').contents().length.

这是一个有效的小提琴：

$(document).ready(function () {
if ($('#box').contents().length == 0){
$('#box').hide();
} else {
$('#box').show();
}
});

$(document).ready(function(){
    $("#click").click(function(){
        $("#box").slideToggle("slow");
    });
});

#box{
		width:100%;
		height:100%;	
		background-color:red;
    color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">Hello World</div>

<div id="click">
click me
</div>

【讨论】：