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