دو عمل متفاوت با یک رویداد کلیک

[Hamid.mohammadian]

سلام. من یک باتون دارم که وقتی کلیک شد نیاز دارم دوتا اتفاق بیفته
1- اینکه یک منو toggle بشه
2-اینکه یک اسلایدر با کلیک اول top اون +30 بشه و با بار دوم برگرده سرجاش یعنی -30

لطفا راهنمایی بفرمایید

اینم کد مورد نظر

$('.option').click(function () {
$('#middle').animate({top:'+=30px'},300,function() {$('.optionbox').toggle();});
});

[Hamid.mohammadian]

دوستان کسی نمیتونه کمک کنه؟

کل مطالب مربوطه به زبان انگلیسی رو مطالعه کردم اما هیچ راهکاری جواب نداد

[xvahid]

شما مارک آپ صفجه رو هم بذارین تا بشه بهتون کمک کرد.

[Hamid.mohammadian]

این هم موارد مربوط:



<button type="button" class="option" name="optionsbutton"></button>
<div class="optionbox">

<vb:if condition="$show['guest']">
<li><a class="signup" href="register.php">Register for free</a></li>
<vb:else />
<li><a class="settings" href="usercp.php{vb:raw session.sessionurl_q}"><p>Setting</p></a></li>
<li><a class="myaccount" href="{vb:link member, {vb:raw bbuserinfo}}"><p>Me</p></a></li>
<li><a class="privatemessage" href="private.php"><p>Message</p></a></li>
<li><a class="logout" href="login.php?{vb:raw session.sessionurl}do=logout&amp;logouthash={vb:raw bbuserinfo.logouthash}" onclick="return log_out('{vb:rawphrase sure_you_want_to_log_out}')"><p>Log out</p></a></li>
</vb:if>
<vb:if condition="is_member_of($bbuserinfo, 6)"><li><a class="admincp" href="admincp" target="_blank"><p>Admincp</p></a></li></vb:if>
<li><a class="advertise" href="ads.php"><p>Advertise</p></a></li>
<li><a class="help" rel="help" href="faq.php{vb:raw session.sessionurl_q}"><p>Help</p></a></li>

</div>




<div id="middle">
<div id="fixer">
<div class="camera_wrap camera_black_skin" id="slider">
<div data-thumb="images/n3d/slider/thumbs/bridge.jpg" data-src="images/n3d/slider/bridge.jpg">
<div class="camera_caption fade">
just a test
</div>
</div>
<div data-thumb="images/n3d/slider/thumbs/leaf.jpg" data-src="images/n3d/slider/leaf.jpg">
<div class="camera_caption fade">
It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
</div>
</div>
<div data-thumb="images/n3d/slider/thumbs/road.jpg" data-src="images/n3d/slider/road.jpg">
<div class="camera_caption fade">
<em>It's completely free</em> (even if a donation is appreciated)
</div>
</div>
<div data-thumb="images/n3d/slider/thumbs/sea.jpg" data-src="images/n3d/slider/sea.jpg">
<div class="camera_caption fade">
Camera slideshow provides many options <em>to customize your project</em> as more as possible
</div>
</div>
<div data-thumb="images/n3d/slider/thumbs/shelter.jpg" data-src="images/n3d/slider/shelter.jpg">
<div class="camera_caption fade">
It supports captions, HTML elements and videos and <em>it's validated in HTML5</em> (<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.pixedelic.com%2Fplugins %2Fcamera%2F&amp;charset=%28detect+automatically%29&amp;do ctype=Inline&amp;group=0&amp;user-agent=W3C_Validator%2F1.2" target="_blank">have a look</a>)
</div>
</div>
<div data-thumb="images/n3d/slider/thumbs/tree.jpg" data-src="images/n3d/slider/tree.jpg">
<div class="camera_caption fade">
Different color skins and layouts available, <em>fullscreen ready too</em>
</div>
</div>
</div>


</div>
</div>

[xvahid]

در واقع شما میخواین :

1-با زدن دکمه دفعه اول اون Div که بالا باز کردین و کلاس OptionBox داره و همه لینک ها توی اون هستند ناپدید شه و Div بعدی که آیدیش middle ه 30 پیکسل بیاد بالاتر

2- با زدن دکمه دفعه دوم Div اول ظاهر شه و Div دوم 30 پیکسل بره پایین.

درسته؟

ضمناً چه ورژن Jquery استفاده میکنین.

[Hamid.mohammadian]

بله کاملا درسته دوست عزیزم.
فقط جای 1 و 2 رو اشتباه نوشتی.

از نسخه 1.7 که قصد دارم در نسخه فاینال از 1.10 استفاده کنم

[afshin9032]

میتونی استایل display رو برای div ها چک کنی و بر اساس حالت هر کدوم ، عمل مورد نظرت رو انجام بدی .

[xvahid]

بله کاملا درسته دوست عزیزم.
فقط جای 1 و 2 رو اشتباه نوشتی.

از نسخه 1.7 که قصد دارم در نسخه فاینال از 1.10 استفاده کنم

برای اینکه Animate کار کنه حتماً بایستی position روی absolute یا relative و یا fixed تنظیم شده باشه.

این صفحه شما پس از یک مقدار ساده شدنه:





<button type="button" class="option" id="optionsbutton" name="optionsbutton">Test</button>
<div class="optionbox">
<li><a class="signup" href="#">Register for free</a></li>
</div>

<div id="middle" style="position : relative; top : 120px;">
<div id="fixer">
just a test
</div>
</div>

<script language="javascript">

$(document).ready(function () {
$('.optionbox').hide();
});

$('.option').click(function () {
$('.optionbox').toggle();
if ($('.optionbox').is(':visible')) {
$('#middle').animate({ top: '+=30' }, 300);
} else {
$('#middle').animate({ top: '-=30' }, 300);
}
});

</script>






از اینجا میتونی در عمل ببینیش :

http://jsfiddle.net/fSL9Y/