ورود

View Full Version : سلام مشکل این کد کجاست تغییر طول div با jquery


alismith
پنج شنبه 12 اسفند 1389, 12:16 عصر
سلام لطفا ببینید می تونید مشکل این کد رو پیدا کنید
alert() گذاشتم تا نشون بده شرط کار می کنه




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">

.box{

width: 200px;
height: auto;
background: #666;
float: left;
margin-right: 5px;

}

.shcp{

text-decoration: none;

}

</style>

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script language="javascript" type="application/javascript">

$(document).ready(function(){

$(".shcp").click(function(){

//set height of parent div
var height = $(this).parent('div').height();

if(height!='20'){

$(this).parent('div').animate({
height: '20px'
},"slow");
alert(height);
}else{
$(this).parent('div').animate({
height: 'auto'
},"slow");
}

});
});

</script>

</head>

<body>
<div class="box"><a class="shcp" href="">[show/hide]</a><br/>row1<br/>row2<br/><br/></div>

<div class="box"><a class="shcp" href="">[show/hide]</a><br/>row1<br/>row2<br/></div>
</body>
</html>
mostafa_shaeri_tj
پنج شنبه 12 اسفند 1389, 23:59 عصر
سلام. به جای استفاده از این خط واسه شروع نوشتن کد های جی کویری :


<script language="javascript" type="application/javascript">

از این استفاده کن :


<script>
alismith
جمعه 13 اسفند 1389, 18:42 عصر
سلام
آقا مشکل حل نشد اگه می تونید کدتون رو اینجا بگذارید تا من ببینم!
رضا قربانی
جمعه 13 اسفند 1389, 21:05 عصر
به جای اسکریپتت این رو بذار - البته همراه با آدرس کتابخانه .

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$(".shcp").click(function(){

//set height of parent div
var height = $(this).parent('div').height();

if(height!='150px'){

$(this).parent('div').animate({
height: '150px'
},"slow");
alert(height);
}else{
$(this).parent('div').animate({
height: '190px'
},"slow");
}

});
});

</script>



دوست من - لطفا بهمون بگو که می خواهید چه عملی واستون انجام بده (می خواهی مخفی بشه یا با زدن هر بار کلیک 20 تا به ارتفاع اضافه بشه ؟)
mehdi.mousavi
یک شنبه 15 اسفند 1389, 17:49 عصر
سلام.
می تونید بدین شکل عمل کنید:

$(function () {
$(".shcp").click(function () {
var div = $(this).parent('div'), height = div.height();
if (height != 20) {
div.data('height', height).animate({ height: 20 }, "slow");
}
else {
div.animate({ height: div.data('height') }, "slow");
}

return false;
});
});


اینجا، من ابتدا نگاه میکنم، اگر ارتفاع مخالف 20 بود، ارتفاع فعلی رو با استفاده از data ذخیره می کنم، و سپس عمل animate کردن div رو انجام میدم.
اما اگر ارتفاع div بیست پیکسل نبود، اونوقت میدونم ارتفاع رو باید به مقدار ذخیره شده افزایش بدم.
در نهایت به return false در انتهای کد توجه کنید! اون خط باعث میشه تا Event ها به سمت بالا Bubble نشن و در نتیجه، Link مورد نظر Follow نشه.

موفق باشید.

پاورقی: لطفا از این پس توضیح بدید که کدتون چه ایرادی داره و انتظار دارید چطور کار کنه تا بشه سریعتر پاسخ داد.
رضا قربانی
دوشنبه 16 اسفند 1389, 19:41 عصر
دوست من - به سوالی که بالا ازتون سوال کردم جواب ندادید

لطفا برای ارتفاع پیکسل هم بگذارید

جواب سوال پست 4 رو بدید تا من بتونم کمکتون کنم - در غیر این صورت و نداشتن کد اصلیتون دست من همه جوره بسته هست

موفق باشی دوست من