jquery - jQueryクリックトグル

Question

私はこれに頭を悩ませようとしていますが、そうは思えません。基本的に、＃oneが表示され、＃twoが非表示になるリストを作成しようとしています。＃oneにカーソルを合わせると、＃twoが下にスライドし、クリックすると選択され、＃oneが非表示になります。隠されている、またはその逆...助けてくれませんか？

<div class="sort">
 <div id="one"></div>
 <div id="two"></div>
</div>

$('.sort #one').click(function(){
  $('.sort #one').toggle(function(){
    $(this).animate({ top: '30px' }, 100, "linear");
  });
});

Answer 1

それを試してみてください...

<script type="text/javascript">
      var check = false;
         $(document).ready(function () {
            $('.sort #one').mouseenter(function () {
                $('.sort #two').toggle(function () {
                    $(this).animate({ top: '30px' }, 100, "linear");
                });
            });

        $('.sort #two').mouseenter(function () {
            check = true;
            $(this).click(function () {
                $('.sort #one').toggle(function () {
                    $(this).animate({ top: '30px' }, 100, "linear");
                });
            });
        });

        if (check != false) {

            $('.sort #one').mouseleave(function () {
                $('.sort #two').toggle(function () {
                    $(this).animate({ top: '30px' }, 100, "linear");
                });
            });
        }
    });

</script>

Answer 2

これを試して：

$(function() {

    // #one will be shown and #two will be hidden
    $('#one').show();
    $('#two').hide();

    // when #one is hovered over then #two will slide down 
    // if you click on it then it will be selected and #one will be hidden
    $('#one').hover(
    function() {
        $('#two').toggle(function() {
            $(this).animate({top: '30px'}, 100, "linear");
        })
    }, function() {
        $('#two').toggle(function() {
            $(this).animate({top: '30px'}, 100, "linear");
        })
    }).click(function() {
        $('#one').hide();
        $('#two').toggle();
    });

    // and vice versa...
    $('#two').hover(
    function() {
        $('#one').toggle(function() {
            $(this).animate({top: '30px'}, 100, "linear");
        })
    }, function() {
        $('#one').toggle(function() {
            $(this).animate({top: '30px'}, 100, "linear");
        })
    }).click(function() {
        $('#two').hide();
        $('#one').toggle();
    });
});​