Jquery顯示/隱藏

我正在試圖做出簡單的jQuery代碼顯示/隱藏功能。但我仍然做錯了什麼。Jquery顯示/隱藏

$(document).ready(function(){ 
    $('.arrow').click(function() { 
     $('#box').show("slow");  
    }); 

    $('.arrow').click(function() { 
     $('#box').hide("slow"); 
    }); 
    $('.arrow').click(function() { 
     $('#box').show("slow");  
    }); 
});

http://jsfiddle.net/Armgh/

來源

2013-01-06 user1531193

你有什麼問題 – Prashant16

使用toggle：

$(document).ready(function(){ 
    $('.arrow').click(function() { 
     $('#box').toggle('slow');  
    }); 
});

http://jsfiddle.net/Armgh/1/

也可以保存自己的地位和手動切換：

$(document).ready(function(){ 
    var hidden = false; 
    $('.arrow').click(function() { 
     if (hidden) { 
      hidden = true; 
      $('#box').hide("slow"); 
     } else { 
      hidden = false; 
      $('#box').show("slow"); 
     } 
    }); 
});

http://jsfiddle.net/Armgh/

編輯

使用slideUp/slideDown，你可以這樣做：

$(document).ready(function(){ 
    var hidden = false; 
    $('.arrow').click(function() { 
     if (hidden) { 
      hidden = false; 
      $('#box').slideDown("slow"); 
     } else { 
      hidden = true; 
      $('#box').slideUp("slow"); 
     } 
    }); 
});

http://jsfiddle.net/Armgh/3/

或使用slideToggle

$(document).ready(function(){ 
    $('.arrow').click(function() { 
     $('#box').slideToggle("slow"); 
    }); 
});

http://jsfiddle.net/Armgh/4/

來源

2013-01-06 08:20:48 Kuf

好工作良好，留下問題時，我改變toogle slieDown和slideUp會發生什麼？謝謝 – user1531193

回答更新，如果這有幫助請[接受此答案]（http://meta.stackexchange.com/questions/16721/how-does-accept-rate-work/65088#65088）:) – Kuf

+1，很詳細的解決方案 – Raghav

您只需要使用.toggle功能：

$(document).ready(function(){ 

    $('.arrow').click(function() { 
     $('#box').toggle("slow");  
    }); 

});

來源

2013-01-06 08:24:56 TwTw

你可以使用任何與切換[slow，medium，fast]參數也

$(document).ready(function(){ 
     $('.arrow').on('click', function() { 
      $('#box').toggle("slow"); 
     }); 
    });

來源

2017-09-10 19:53:39

Jquery顯示/隱藏

回答

相關問題