Jump to content

Photo
* * * * * 1 votes

JQuery - rozwijany sidebar w Wordpressie

jquery sidebar rozwijany toggle

Best Answer unbreak, 18 December 2013 - 09:07

Ok, plik style.css odnajdź element #secondary i wywal mu

display:none

albo zmień na:

display:block

Teraz w html znajdź element ".sidebar-link" i w jego contencie daj - (czyli znak minus), a do klasy dodaj " toggled-on".

 

Powinno zadziałać na 100%.

Go to the full post


7 replies to this topic
  • Please log in to reply
kubzal
0
Neutralna

Posted 17 December 2013 - 11:09

#1

Witam wszystkich. Chciałem ustawić w skrypcie jquery z templatki, żeby sidebar był domyślnie rozwiniety a nie zwiniety. Ale nie do końca moge sie połapac w kodzie. Czy mógłbym prosić o pomoc?

jQuery( document ).ready( function( $ ) {

	// Submenu highlighting
	$("ul.sub-menu").closest("li").addClass('parent');
	$(".main-navigation ul.children").closest("li").addClass('parent');

	var $comments = $( '#content' );

	// Toggle comments on
	$( '.comments-link' ).unbind( 'click' ).click( function() {

		$('html,body').animate( { scrollTop: $("#comments-toggle").offset().top },'slow' );
		$comments.find( '#comments' ).slideToggle( 'ease' );
		$(this).toggleClass( 'toggled-on' );

	} );

	var $sidebar = $( '#main' );

	// Toggle sidebar on
	$( '.sidebar-link' ).unbind( 'click' ).click( function() {
		$( 'html,body' ).animate( { scrollTop: $( "#secondary" ).offset().top },'slow' );
		$sidebar.find( '#secondary' ).slideToggle( 'ease' );
		$(this).toggleClass( 'toggled-on' );
		if ( $(this).hasClass( 'toggled-on' ) )
			$(this).text( '-' );
		else
			$(this).text( '+' );
	} );

	//Toggle the the main navigation menu for small screens.
	var $masthead = $( '#masthead' ),
	    timeout = false;

	$.fn.smallMenu = function() {
		$masthead.find( '.site-navigation' ).removeClass( 'main-navigation' ).addClass( 'main-small-navigation' );
		$masthead.find( '.site-navigation h1' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' );

		$( '.menu-toggle' ).unbind( 'click' ).click( function() {
			$masthead.find( '.menu' ).slideToggle( 'ease' );
			$( this ).toggleClass( 'toggled-on' );
		} );
	};

	// Check viewport width on first load.
	if ( $( window ).width() < 600 )
		$.fn.smallMenu();

	// Check viewport width when user resizes the browser window.
	$( window ).resize( function() {
		var browserWidth = $( window ).width();

		if ( false !== timeout )
			clearTimeout( timeout );

		timeout = setTimeout( function() {
			if ( browserWidth < 600 ) {
				$.fn.smallMenu();
			} else {
				$masthead.find( '.site-navigation' ).removeClass( 'main-small-navigation' ).addClass( 'main-navigation' );
				$masthead.find( '.site-navigation h1' ).removeClass( 'menu-toggle' ).addClass( 'assistive-text' );
				$masthead.find( '.menu' ).removeAttr( 'style' );
			}
		}, 200 );
	} );
} );

Pozdrawiam


  • 0

unbreak

    WT Elite

  • 1937 posts
    • Czas spędzony online: 27d 8h 43m 36s
506
Znakomita!
  • Location/home/unbreak

Posted 17 December 2013 - 11:48

#2

Co prawda nie wiem jak to działa (nie podałeś linku) i możliwe że normalnie w css to by się dało zrobić, to patrząc na skrypt, tam gdzie masz:

var $sidebar = $( '#main' );

zmień na:

var $sidebar = $( '#main' );
$sidebar.show();
$('.sidebar-link').addClass('toggled-on').text('-');

  • 1

webDeveloper


kubzal
0
Neutralna

Posted 17 December 2013 - 14:06

#3

Hmm spróbowałem ale nic z tego :(

proszę oto link

http://hipster.webt.pl/smutny/

http://hipster.webt....un/js/toggle.js


  • 0

unbreak

    WT Elite

  • 1937 posts
    • Czas spędzony online: 27d 8h 43m 36s
506
Znakomita!
  • Location/home/unbreak

Posted 17 December 2013 - 14:43

#4

Sprawdź to: 

var $sidebar = $( '#main' );
jQuery("#secondary").show();
jQuery('.sidebar-link').toggleClass('toggled-on').text('-');

Jak nie zadziała, to wywal moje zmiany i daj znać, zobaczę jak to działa bez zmian i wtedy je dostosujemy.


  • 0

webDeveloper


kubzal
0
Neutralna

Posted 18 December 2013 - 00:19

#5

Sprawdź to: 

var $sidebar = $( '#main' );
jQuery("#secondary").show();
jQuery('.sidebar-link').toggleClass('toggled-on').text('-');

Jak nie zadziała, to wywal moje zmiany i daj znać, zobaczę jak to działa bez zmian i wtedy je dostosujemy.

Też tak próbowałem :) to było pierwsze co mi przyszło do głowy niestety nic. Wywalam zmiany.


  • 0

unbreak

    WT Elite

  • 1937 posts
    • Czas spędzony online: 27d 8h 43m 36s
506
Znakomita!
  • Location/home/unbreak

Posted 18 December 2013 - 09:07   Best Answer

#6

Ok, plik style.css odnajdź element #secondary i wywal mu

display:none

albo zmień na:

display:block

Teraz w html znajdź element ".sidebar-link" i w jego contencie daj - (czyli znak minus), a do klasy dodaj " toggled-on".

 

Powinno zadziałać na 100%.


  • 1

webDeveloper


kubzal
0
Neutralna

Posted 19 December 2013 - 00:26

#7

Ok, plik style.css odnajdź element #secondary i wywal mu

display:none

albo zmień na:

display:block

Teraz w html znajdź element ".sidebar-link" i w jego contencie daj - (czyli znak minus), a do klasy dodaj " toggled-on".

 

Powinno zadziałać na 100%.

Działa ! Jesteś wielki :) Dziękuję bardzo ;)


  • 0

unbreak

    WT Elite

  • 1937 posts
    • Czas spędzony online: 27d 8h 43m 36s
506
Znakomita!
  • Location/home/unbreak

Posted 19 December 2013 - 09:00

#8

Spoko, nie dodałeś jeszcze tylko elementowi sidebar-link klasy toggled-on, przez to znaki + / - się mieszają - pojawiają się nie w tym momencie co trzeba.


  • 0

webDeveloper






Podone tematy Collapse


Also tagged with one or more of these keywords: jquery, sidebar, rozwijany, toggle

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users