Javascript 从左侧进行切换

您好，我有以下HTML：

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

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

我的意思是，当我单击元素时，我希望div显示在span元素的左侧

以下是我到目前为止的情况：

---

我认为您只需要一些CSS样式就可以做到这一点

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

这是你的电话号码

干杯

编辑：只需再次阅读答案，看起来您希望它显示在左侧，很抱歉前面的问题，但是使用css您也可以做得很好

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

---

尝试以下方法。您将需要来自

jqueryui

的

effects

，但正如我在您的jsfiddle中看到的，您正在使用它

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

---

请参见

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

没有jQuery UI:

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

。本例使用.animate（）更改宽度

---

使用jQuery UI

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

。本例使用jQueryUI的效果方法。

像这样试试

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

---

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

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

jQuery.fn.blindToggle=函数（速度、缓解、回调）{
var h=this.outerWidth（）；
返回this.show（）.animate（{marginLeft:parseFloat（this.css（'marginLeft'））<0？0:-h}，速度，放松，回调）；
};

您可以实现如下效果：

我不是一个好老师
$（文档）.ready（函数（）{
$（'.slide1'）。单击（函数（）{
$（“#秒”）。设置动画({
宽度：“100px”，
}, 1000);
});
});

为什么我再次单击时它没有隐藏？应该可以that@Chris答案中的提琴与问题中的提琴相同。+1作为第一个示例，是双向切换，输入和输出。再加上一些漂亮的CSS，以防止文本的包装，这是完美的<代码>#第二个{空白：nowrap；}-

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

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