jQuery点击切换

我试图让我的头在这附近，但我似乎无法。基本上，我试图创建一个列表，其中#one将被显示，并且#two将被隐藏，当#one被悬停时，#two会滑落，如果你点击它，那么它将被选中并且#one将被隐藏，反之亦然......你能帮助我吗？jQuery点击切换

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

来源

2012-11-22 green_arrow

没有理由使用 '的.sort #one' 为选择，使用 '#one' –

尝试...

<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>

来源

2012-11-22 11:27:52

试试这个：

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

来源

2012-11-22 14:11:33

jQuery点击切换

回答

相关问题