jQuery的toggleslide與按鈕

Question

我有格的紅色框，顯示文本的地方說：「世界你好」，有jQuery代碼

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

是什麼做的是，如果這個盒子不是空的，那麼它會如果這個紅色框是空的，那麼它不會顯示它。 這個jquery很棒。

，現在我想在同一個盒子「ID =」盒子」添加toggleslider，我用這個jQuery代碼..

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

的問題是不工作，因爲與第一jQuery的代碼墜毀 只能正常工作，不能同時有兩個。

可能工作的唯一方法就是合併到一起，我喜歡的是加載頁面時，如果紅框不爲空，然後顯示紅色框，如果爲空則不顯示框，同時有用戶點擊按鈕可以在該紅色框上下滑動的選項

看到jsfiddle

Answer 1

你有相當一些有語法錯誤...... 堡例子來看看這個：$('#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{ 
 
\t \t width:100%; 
 
\t \t height:100%; \t 
 
\t \t 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%; \t 
 
    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>