2014-02-01 3 views
0

У меня странная проблема. Во-первых, я помещал функцию slideup() в свой сайт, и это не сработало. Я попробовал сортировки, чтобы заставить его работать безрезультатно. Я даже попытался скопировать и вставить пример кода в новый html-файл, и это даже не работает. Есть идеи? Я всегда могу получить событие click(), чтобы что-то сделать, но slideup() никогда не работает. Начать меня немного орехи!jquery slideup не работает независимо от того, что я делаю

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>slideUp demo</title> 
<style> 
div { 
background: #3d9a44; 
margin: 3px; 
width: 80px; 
height: 40px; 
float: left; 
} 
</style> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<body> 
Click me! 
<div></div> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 
<script> 
$(document.body).click(function() { 
if ($("div:first").is(":hidden")) { 
$("div").show("slow"); 
} else { 
$("div").slideUp(); 
} 
}); 
</script> 
</body> 
</html> 
+0

кажется прекрасный http://jsfiddle.net/arunpjohny/6L5yQ/1/ –

ответ

3

У вас будет больше ясности, используя класс, и даст вам возможность более стильного дизайна.

например, что-то вроде -

if ($("div:first").hasClass("visible")) { 

    $("div").slideUp().removeClass("visible"); 

} else { 

    $("div").show("slow").addClass("visible"); 
} 

Вы всегда можете попробовать slideToggle() тоже для такого рода работы -

$(document.body).click(function() { 

    $("div").slideToggle(); 

}); 

Демо с SlideToggle - http://jsfiddle.net/e7t7F/

Update, как комментарий, полный пример страницы

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head> 
    <title>Slide Toggle</title> 
    <style> 
     div { background-color:orange; 
        display:block; 
        width:5em; 
        height:5em; 
        margin:.5em 
       } 
      /* just example style */ 
    </style> 
</head> 
<body> 

    <div>ONE</div> 
    <div>TWO</div> 
    <div>THREE</div> 
    <div>FOUR</div> 
    <div>FIVE</div> 
    <div>SIX</div> 

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script> 
    $(document).click(function() { 
    $("div").slideToggle(); 
    }); 
    </script> 
</body> 
</html> 
+0

slideToggle является правильной функцией для этого! –

+0

Спасибо, хотя я должен указать, что это код кода, который я копировал и вставлял, который все еще не работает. Он работает на вас? Также я новичок в jquery :) –

+0

Привет, Nick, добавлена ​​демонстрация метода slideToggle –

Смежные вопросы