使用JQuery在页面外部定位一个div

当用户单击位于两个div之外的文本链接时，我试图使子div滑入父div中的视图

它基本上用于搜索页面的高级搜索条件部分，因此当用户进入页面时，默认情况下，我会尝试先将其关闭一点（将其隐藏），直到用户单击文本链接，使其切换并滑入视图。（高级搜索条件就像linkedin需要水平幻灯片）

这里是我得到的，当用户输入时，它似乎不会隐藏，也不允许我在同一页面上外部定位文本链接

CSS

 <style type="text/css">
.slide {
position: relative;
overflow: hidden
}

.slide .inner {
bottom: 0;
width: 220px;
}

</style>

.幻灯片{
位置：相对位置；
溢出：隐藏
}
.幻灯片.内部{
底部：0；
宽度：220px；
}

父div中可怕的链接文本似乎无法重新定位：

<div id="slidebottom" class="slide">
<a href="#" class="toggle">Slide it</a>
<div class="inner">

Jquery：

<script>
$(document).ready(function() {
    $('.toggle').click(function() {
        var $marginLefty = $(this).next();
        $marginLefty.animate({
            marginLeft: parseInt($marginLefty.css('marginLeft'), 10) == 0 ?
                $marginLefty.outerWidth() : 0
        });
    });
});
</script>

$（文档）.ready（函数（）{
$（'.toggle'）。单击（函数（）{
var$marginLefty=$（this.next（）；
$marginLefty.animate({
marginLeft:parseInt（$marginLeft.css（'marginLeft'），10）=0？
$marginLefty.outerWidth（）：0
});
});
});

我给你举了一个简单的例子：

---

我给你举了一个简单的例子：

---

它似乎像预期的那样一开始就隐藏了div。唯一的问题是它现在从左边滑入，而不是从右边滑入，并且由于某种原因，文本链接不能在父div之外使用。更新了JSFIDLE以显示链接在父div之外时不起作用。如果需要将链接放置在其他位置，请为.INTERNAR提供一个id并使用$（“#id”）.animate（..这些内容非常基本，在jquery.com上有完整的文档记录。似乎一旦我第二次从崩溃状态切换并尝试扩展它，div就会出现在页面上所有其他div的后面，而不是像第一次那样推动它们。对此的任何帮助都将不胜感激。感谢您迄今为止的帮助！到目前为止，我已经打开了不允许用户展开div并限制他们折叠它，因为div的当前行为在第二次之后出现。用于仅显示一次的代码：$（document.ready（function（）{$（'.toggle'）。单击（function（）{var$marginLefty=$（this.next（）；$（“#inners”）。动画（{width:'show'}）；}）；它最初似乎像预期的那样隐藏了div。唯一的问题是，它现在从左侧滑入，而不是从右侧滑入，并且由于某种原因，文本链接不能在父div之外使用。更新了jsfiddle，以显示链接在父div之外时不起作用。如果需要将链接放置在其他位置，请为.inner提供一个id并使用$(“#id”）。制作动画（..这些内容非常基本，在jquery.com上有完整的文档记录。似乎一旦我第二次从崩溃状态切换并尝试扩展它，div就会出现在页面上所有其他div的后面，而不是像第一次那样推动它们。对此的任何帮助都将不胜感激。感谢您迄今为止的帮助！到目前为止，我已经打开了不允许用户展开div并限制他们折叠它，因为div的当前行为在第二次之后出现。用于仅显示一次的代码：$（document.ready（function（）{$（'.toggle'）。单击（function（）{var$marginLefty=$（this.next（）；$（“#inners”）。动画（{width:'show'}）；}）；

$('.toggle').click(function() {
  $(this).next().animate({width: 'toggle'});
});