jQuery slideToggle方向 [英] jquery slideToggle direction
本文介绍了jQuery slideToggle方向的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试滑动jquery .slideToggle，但是单击div(nav)时无法向左或从右向左添加方向.请帮帮我，下面是我的代码.
I am trying to slide jquery .slideToggle but i am not able to add direction left to right or right to left on click of a div (nav). Please help me out, below is my code.
<!DOCTYPE html>
<html>
<head>
<style>
p { width:400px; float:right;background:#e4e4e4; margin:5px;padding:5px;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body style="font-size:10px; color:#333;">
<div style="width:50px; height:15px;float:right;background:#ccc;border:1px solid #333;text-align:center;">Nav</div>
<p>
This is the paragraph to end all paragraphs. You
should feel <em>lucky</em> to have seen such a paragraph in
your life. Congratulations!
</p>
<script>
$("div").click(function () {
$("p").slideToggle("slow");
});
</script>
</body>
我是jquery新手，不胜感激.
I am new to jquery, help much appreciated.
推荐答案
您需要在文本中添加一个父项.
You need to add a parent to the text.
<body>
<div class="nav">Nav</div>
<div class="text">
<p>This is the paragraph to end all paragraphs. You should feel <em>lucky</em> to have seen such a paragraph in your life. Congratulations!</p>
</div>
</body>
样式:
body {
font-size: 10px;
color: #333; }
.nav {
float: right;
width: 50px;
height: 30px;
text-align: center;
background: #ccc;
border: 1px solid #333; }
.text {
overflow: hidden;
float: right;
margin: 5px;
padding: 5px;
width: 400px;
background: #e4e4e4; }
和javascript:
And the javascript:
$('.nav').click(function() {
$('.text p').css({
'width': $('.text p').width(),
'height': $('.text p').height()
});
$('.text').animate({'width': 'toggle'});
});
您在以下位置有一个演示: http://jsfiddle.net/abwVd/
You have a demo at: http://jsfiddle.net/abwVd/
这篇关于jQuery slideToggle方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
