我正在尝试滑动 jquery .slideToggle 但我无法在单击 div （导航）时添加从左到右或从右到左的方向。请帮帮我，下面是我的代码。
<!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 新手，非常感谢您的帮助。
您需要向文本添加父级。
$('.nav').click(function() {
$('.text p').css({
'width': $('.text p').width(),
'height': $('.text p').height()
});
$('.text').animate({
'width': 'toggle'
});
});
body {
font-size: 10px;
color: #333;
}
.nav {
float: right;
width: 50px;
line-height: 38px;
text-align: center;
background: #ccc;
border: 1px solid #333;
cursor: pointer;
}
.text {
overflow: hidden;
float: right;
margin: 0 5px;
padding: 5px;
background: #e4e4e4;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
您可以在以下位置进行演示：http://jsfiddle.net/o6rj51bm/ http://jsfiddle.net/o6rj51bm/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
