Question

您好我有以下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/

Answer 1

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

没有jQuery UI：

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

<强> jsFiddle example 即可。此示例使用.animate（）来更改宽度。

使用jQuery UI

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

<强> jsFiddle example 即可。此示例使用jQuery UI的效果方法。

Answer 2

我认为你只需要一些CSS风格就可以了。

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

以下是updated JS Fiddle

干杯。

编辑：只需再次阅读答案，看起来你希望它出现在左边，对不起前一个，但是用css你也可以做得很好

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

New JS Fiddle

Answer 3

尝试以下方法。您需要effects中的jquery-ui，但正如我在您的jsfiddle中看到的那样，您正在使用它。

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

请参阅http://jsfiddle.net/gVjFs/73/

Answer 4

试试这个

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

See Demo

Answer 5

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

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

Answer 6

您可以达到以下效果：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);
       });
   });

从左侧切换

6 个答案: