jquery slideToggle方向

我试图滑动jquery .slideToggle但我无法在点击div（nav）时从左到右或从右到左添加方向。 请帮帮我，下面是我的代码。

    p { width:400px; float:right;background:#e4e4e4; margin:5px;padding:5px;}     
Nav
 
 This is the paragraph to end all paragraphs. You should feel lucky to have seen such a paragraph in your life. Congratulations! 
  $("div").click(function () { $("p").slideToggle("slow"); });   

我是jquery的新手，非常感谢。

Answer 1

您需要在文本中添加父级。

  
Nav
 
 
This is the paragraph to end all paragraphs. You should feel lucky to have seen such a paragraph in your life. Congratulations!
 
  

样式：

 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：

 $('.nav').click(function() { $('.text p').css({ 'width': $('.text p').width(), 'height': $('.text p').height() }); $('.text').animate({'width': 'toggle'}); }); 

你有一个演示： http ： //jsfiddle.net/abwVd/

Answer 2

jquery中slideToggle的默认行为是“向上滑动”或“向下滑动”。 如果您希望

“向左滑动”和“向右滑动”，则可以使用jquery ui中提供的“幻灯片”效果。 direction参数接受’up’，’down’，’left’，’right’作为有效值。 http://docs.jquery.com/UI/Effects/Slide

Answer 3

你可以这样做：

 p { width:400px; position: absolute; background:#e4e4e4; margin:5px;padding:5px;} 

（使用绝对位置而不是向右浮动）

还有这个：

  $(document).ready(function() { var $elem = $("p"); var docwidth = $(document).width(); var inileft = docwidth - $elem.outerWidth(); $elem.css("left", inileft); //Position element tho the right $("div").click(function () { //This slides $elem.animate({ left: (parseInt($elem.css("left"), 10) >= docwidth ? inileft : docwidth) }); }); }); 

通过使用动画，您可以执行非常自定义的动画。 希望这可以帮助。 干杯

Answer 4