jquery slideToggle方向

Question

jquery slideToggle方向

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

    <!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>

Run Code Online (Sandbox Code Playgroud)

我是jquery的新手,非常感谢.

Answer 1

rag*_*nar 9

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

<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>

Run Code Online (Sandbox Code Playgroud)

样式:

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; }

Run Code Online (Sandbox Code Playgroud)

和javascript:

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 2

Amr*_*rit 3

jquery中slideToggle的默认行为是“向上滑动”或“向下滑动”。如果您希望<p>“向左滑动”和“向右滑动”，可以使用 jquery ui 中提供的“滑动”效果。方向参数接受“上”、“下”、“左”、“右”作为有效值。http://docs.jquery.com/UI/Effects/Slide

归档时间：	14 年，2 月前
查看次数：	50047 次
最近记录：	10 年，11 月前