使用 JQuery 在页面外部定位 div答案

【问题标题】：Targeting a div externally on the page using JQuery使用 JQuery 在页面外部定位 div
【发布时间】：2011-12-19 13:25:19
【问题描述】：

当用户单击位于任一 div 之外的文本链接时，我试图让子 div 滑入父 div 中的视图。

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

这是我得到的，当用户进入时似乎并没有隐藏它，也不允许我在同一页面上从外部放置文本链接。

CSS

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

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

</style>

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

【问题讨论】：

标签： jquery

【解决方案1】：

我为你做了一个简单的例子：

http://jsfiddle.net/WJ7Zp/

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

【讨论】：

它似乎最初像预期的那样隐藏了 div。唯一的问题是它现在从左侧滑入而不是从右侧滑入，并且由于某种原因无法在父 div 之外使用文本链接。更新了 jsfiddle 以显示链接在父 div 之外时不起作用jsfiddle.net/WJ7Zp/1
如果您需要将链接放在其他位置，请给 .inner 一个 id 并使用 $("#id").animate(...。这些东西非常基本，并且在 jquery 中有详细记录。 com
似乎一旦我第二次从折叠状态切换并尝试展开它，div 就会出现在页面上所有其他 div 的后面，而不是像第一次那样推送它们。对此的任何帮助将不胜感激。感谢您迄今为止的帮助！
到目前为止，我只允许用户展开 div 并限制他们折叠它，因为 div 的当前行为第二次出现在后面。用于仅显示一次的代码：