2

您好，我有以下 HTML：

<span class="slide1"><a href="#" class="slide1">Behavior</a></span>
<div id="second" class="content1">I’m not a good</div>

和下面的jQuery：

$(document).ready(function () {
    $('#second').hide();
    $('span.slide1').click(function () {
        $('#second').slideToggle(800);
        return false;
    });
});

如何使隐藏的 div 切换并从左侧显示？

我的意思是当我单击元素时，我希望 div 出现在 span 元素的左侧。

这是我到目前为止所拥有的：

http://jsfiddle.net/gVjFs/70/

4

6 回答 6

3

有两种方法可以做到这一点，一种也需要 jQuery UI，另一种只需要 jQuery。

没有 jQuery UI：

$(document).ready(function () {
     $('#second').hide();
     $('span.slide1').click(function () {
         $('#second').animate({width:'toggle'},800);;
         return false;
     });
});

jsFiddle 示例。此示例使用 .animate() 更改宽度。

使用 jQuery 用户界面

$(document).ready(function () {
     $('#second').hide();
     $('span.slide1').click(function () {
         $('#second').show("slide", { direction: "left" }, 800);
         return false;
     });
});

jsFiddle 示例。此示例使用 jQuery UI 的效果方法。

于 2013-02-07T13:57:06.950 回答
1

您可以创建自定义动画，如下所示：

jQuery.fn.blindToggle = function(speed, easing, callback) {
  var h = this.outerWidth();
  return this.show().animate({marginLeft: parseFloat(this.css('marginLeft')) < 0 ? 0 : -h}, speed, easing, callback);  
};
于 2013-02-07T13:58:35.617 回答
1

我认为你只需要一些 CSS 样式来做到这一点。

.slide1 {
    display:inline-block;
}
.content1{
    display:inline-block;
}

这是更新的 JS Fiddle

干杯。

编辑：再次阅读答案，看起来您希望它出现在左侧，对前面的内容感到抱歉，但是使用 css 您也可以做到这一点

.slide1 {
    display:inline-block;
}
.content1{
    float:left;
}

新的 JS 小提琴

于 2013-02-07T13:53:50.727 回答
1

试试下面的。您将需要effectsfrom jquery-ui，但正如我在您的 jsfiddle 中看到的那样，您正在使用它。

$(document).ready(function () {
    $('#second').hide();
    $('span.slide1').click(function () {
        $('#second').effect('slide', 500);
        return false;
    });
});

见http://jsfiddle.net/gVjFs/73/

于 2013-02-07T13:56:13.360 回答
1

像这样试试

.slide1 {
display:inline-block;
}
.content1{
display:inline-block;
float: left;
}

看演示

于 2013-02-07T13:57:11.243 回答
0

可以实现这样的效果：http: //jsfiddle.net/gVjFs/70/

<span id="second" class="content1" style="width:0px; display:inline-block; overflow:hidden; float: left; white-space:nowrap;">I’m not a good</span>

<a href="#" class="slide1" style="float: left;">Behavior</a>

   $(document).ready(function () {
       $('.slide1').click(function () {
           $('#second').animate({
               width: '100px',
           }, 1000);
       });
   });
于 2013-02-07T14:03:39.453 回答