0

ユーザーがタイトルをクリックすると、そのコンテンツが含まれ<h2>た状態で開くjQueryコードがあります。div

HTML コード:

<div class="content1">
    <h2 class="vertical"> open text box</h2>
</div>
<div class="content1-text" >
        Text box
   <div id="back1" style="float:right;">HOME</div>
</div>

CSS コード:

.content1-text {
   padding: 20px;
   width: 920px;
   min-height: 560px;
   height: auto;
   background: #61752d;
   margin: 0;
   position: absolute;
   display: none;
}

jQuery コード:

$('.content1').click(function () {
    if($('.content1').is(':visible')){
            $('.content1-text').toggle('slide', {
                direction: 'left'
            }, 1000);
    }
    else{
        $('#back1').toggle('slide', {
            direction: 'left'
        }, 1000, function(){ $('#content1-text').fadeIn();});
    }
});

問題は、ユーザーが開いているテキストボックスをクリックするとボックスが開きますが、ユーザーがHOMEをクリックしても最初のようにスライドバックしないことです...

私はそれを左から右にスライドさせようとしています..そしてそれが右から左に閉じるとき。

私はウェブでそれを見つけようとしましたが、運がありませんでした。

私のJsFiddleはこちら

4

3 に答える 3

2

あなたは本当にtoogleメソッドを確認する必要があると思いますhttp://api.jquery.com/toggle/

次のようなことができます：

$('.content1').click(function () {
    $('.content1-text').toggle("slow");
});
$('#back1').click(function () {
    $('.content1-text').toggle("slow");
});

デモを見るhttp://jsfiddle.net/PBm88/11/

編集

期待される結果の詳細を確認した後classname、相対コンテナのスライド アニメーションを有効にする に基づいて関数を実行できます。

$('.vertical').click(function () {
  var id=$(this).parent().attr('class'),
      slid='.'+id+'-text';
  $(slid).show().animate({
      width:'920px',
      opacity: '1'
  },2000)
});
$('.back').click(function () {
    $(this).parent().animate({
      width:'0px',
      opacity: '0'
    }, 
    {duration:2000,
     complete: function() {
         $( this ).hide();
        }
     });
});

新しいデモhttp://jsfiddle.net/PBm88/59/

于 2013-11-12T15:17:11.710 に答える
0

http://jsfiddle.net/PBm88/13/

代わりにこの jQuery を使用します。

$(document).ready(function() {
        $('#button, #back1').click(function() {
            $('#box').toggleClass('visible');
        });
    });

CSS:

.visible { display: block; }

また、HTML を 3 つの ID で変更しました。

CSSでアニメーションを行います。必要に応じて変更します。

于 2013-11-12T15:11:59.867 に答える
0

ホームボタンのクリックハンドラーがありません

試す

$('.content1').click(function () {
        $('.content1-text').toggle('slide', {
            direction: 'left'
        }, 1000);
});

$('#back1').click(function(){
        $('.content1-text').toggle('slide', {
            direction: 'left'
        }, 1000);
})

デモ:フィドル

于 2013-11-12T15:13:03.800 に答える