Jquery 带按钮的toggleslide

Question

我有 div 个红色方框，在 "hello world" 处显示文本，还有 jquery 代码

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

做的是，如果这个框不为空，则显示框，如果这个红色框为空，则不显示。这个 jquery 效果很好。

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

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

问题是无法正常工作，因为第一个 jquery 代码崩溃了。只能用其中一个，不能同时有两个。

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

见jsfiddle

Answer 1

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

这是一个工作 fiddle:

$(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>

Answer 2

试试这个代码：

$(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>

Jquery 带按钮的toggleslide

Jquery toggleslide with button

jquery

show

toggle

hide