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();
    });
});​