JQueryを使用してページ上のdivを対象とする

私はいずれかのdivの外に位置するテキストリンクをクリックしたときに、親div内のビューに子divスライドを作成しようとしています。

基本的には、検索ページの高度な検索条件セクションに使用されます。ユーザーがページに入ると、デフォルトでは、ユーザーが最初にテキストリンクをクリックするまで、最初は非表示にします。それは表示され、表示されます。 (高度な検索条件は、水平スライドにリンクされたようなものでした)

ここでは、ユーザーが入ったときに隠されていないようなものがあり、同じページにテキストリンクを外部に配置することもできません。

CSS

 

私ができない親のdivの恐ろしいリンクのテキストは、どこにでも移動するようです。

<div id="slidebottom" class="slide">
Slide it
<div class="inner">

The 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>
1

1 答え

私はあなたのための簡単な例を作った:

http://jsfiddle.net/WJ7Zp/

$('.toggle').click(function() {
  $(this).next().animate({width: 'toggle'});
});
1
追加された
リンクをどこか別の場所に置く必要がある場合は、.innerにIDを与え、$( "#id")。animate(....これは非常に初歩的なもので、jquery.comで完全に文書化されています。
追加された 著者 Vigrond,
当初予想通りdivを隠しているようだ。唯一のことは、右の代わりに左からスライドし、テキストリンクを何らかの理由で親divの外で使用することができないことです。親のdivの外にいるときにリンクが表示されないようにjsfiddleを更新しました jsfiddle.net/WJ7Zp/1
追加された 著者 user1105219,
一度折り畳まれた状態からもう一度切り替えて展開しようとすると、divはページの他のdivの後ろに表示されます。これに関する助けがあれば大いに感謝します。これまでのご協力ありがとうございます!
追加された 著者 user1105219,
これまでのところ、ユーザーはdivを拡張して、divの現在の動作が2回目の後ろに表示されるため、divを折り畳まないように制限しました。コードは一度しか表示されませんでした:<script> $(document).ready(function(){$( '。toggle')){var $ marginLefty = $(this).next(); $( ' "#inners")。animate({width: 'show'});});}); </script>
追加された 著者 user1105219,