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

jQuery单击切换

2 个答案: