toggle.js 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. jQuery( document ).ready( function( $ ) {
  2. // Submenu highlighting
  3. $("ul.sub-menu").closest("li").addClass('parent');
  4. $(".main-navigation ul.children").closest("li").addClass('parent');
  5. var $comments = $( '#content' );
  6. // Toggle comments on
  7. $( '.comments-link' ).unbind( 'click' ).click( function(e) {
  8. e.preventDefault();
  9. $('html,body').animate( { scrollTop: $("#comments-toggle").offset().top },'slow' );
  10. $comments.find( '#comments' ).slideToggle( 'ease' );
  11. $(this).toggleClass( 'toggled-on' );
  12. } );
  13. var $sidebar = $( '#main' );
  14. // Toggle sidebar on
  15. $( '.sidebar-link' ).unbind( 'click' ).click( function(e) {
  16. e.preventDefault();
  17. $( 'html,body' ).animate( { scrollTop: $( "#secondary" ).offset().top },'slow' );
  18. $sidebar.find( '#secondary' ).slideToggle( 'ease' );
  19. $(this).toggleClass( 'toggled-on' );
  20. if ( $(this).hasClass( 'toggled-on' ) )
  21. $(this).text( '-' );
  22. else
  23. $(this).text( '+' );
  24. } );
  25. //Toggle the the main navigation menu for small screens.
  26. var $masthead = $( '#masthead' ),
  27. timeout = false;
  28. $.fn.smallMenu = function() {
  29. $masthead.find( '.site-navigation' ).removeClass( 'main-navigation' ).addClass( 'main-small-navigation' );
  30. $masthead.find( '.site-navigation h1' ).removeClass( 'screen-reader-text' ).addClass( 'menu-toggle' );
  31. $( '.menu-toggle' ).unbind( 'click' ).click( function() {
  32. $masthead.find( '.menu' ).slideToggle( 'ease' );
  33. $( this ).toggleClass( 'toggled-on' );
  34. } );
  35. };
  36. // Check viewport width on first load.
  37. if ( $( window ).width() < 800 )
  38. $.fn.smallMenu();
  39. // Check viewport width when user resizes the browser window.
  40. $( window ).resize( function() {
  41. var browserWidth = $( window ).width();
  42. if ( false !== timeout )
  43. clearTimeout( timeout );
  44. timeout = setTimeout( function() {
  45. if ( browserWidth < 800 ) {
  46. $.fn.smallMenu();
  47. } else {
  48. $masthead.find( '.site-navigation' ).removeClass( 'main-small-navigation' ).addClass( 'main-navigation' );
  49. $masthead.find( '.site-navigation h1' ).removeClass( 'menu-toggle' ).addClass( 'screen-reader-text' );
  50. $masthead.find( '.menu' ).removeAttr( 'style' );
  51. }
  52. }, 200 );
  53. } );
  54. } );