0

私はこのクエリクリック機能を持っています:

    <script type="text/javascript">
$(document).ready(function () {

    $('.show_hide').click(function () {
        $(".box").fadeIn(400);
        //$(".box").fadeOut(2500);
    });
});
</script>

<div class="show_hide">Click Here</div>

  <div class="box" style="display:none;">
    <div class="success_message">
        <span class="yes">Yes</span> 
        <span class="no">No</span>
    </div>
</div>

「ここをクリック」をクリックしたら、「ここをクリック」オプションを非表示にして、「はい」と「いいえ」を表示したいと思います。しかし、これらのオプション (はいまたはいいえ) のいずれかがクリックされると、それらを非表示にしてここをクリックして表示したいと考えています。これどうやってするの？

どうすればこれを達成できますか？

4

3 に答える 3

2

デモ--> http://jsfiddle.net/52a4n/1/

$('.show_hide').click(function () {
    $(this).fadeOut();
    $(".box").fadeIn(400);
});

$('.yes,.no').click(function () {
    $(".box").fadeOut(250,function(){
        $('.show_hide').fadeIn();
    });
});
于 2013-05-16T19:49:54.347 に答える
1

このフィドルをチェックしてください

$(document).ready(function () {
    $('.show_hide').click(function () {
        $(this).fadeOut(400, function() {
            $(".box").fadeIn(400);
        });

    });

    $('.success_message span').click(function() {
        $(".box").fadeOut(400, function() {
            $('.show_hide').fadeIn(400);
        });
    })
});
于 2013-05-16T19:50:52.187 に答える
1

これまでのアプローチは正しかったのですが、もう少し先に進めなければなりませんでした。これにより、ボックス div の直後にボックス div がある限り、目的の場所に移動できます。

$(document).ready(function () {
    $('.show_hide').click(function () {
        $(this).hide().next().fadeIn(400);
    });

    $('.box .success_message span').click(function() {
        $(this).parents('.box:first').hide().prev().fadeIn(400);
    });
});
于 2013-05-16T19:48:43.617 に答える