Кажется, что этот jQuery должен работать - PullRequest
Новая
       19

Кажется, что этот jQuery должен работать

0 голосов
/ 19 февраля 2012

Я часами тралялся над этим куском jQuery и до сих пор не могу заставить его работать.

Когда я нажимаю один тумблер, остальные открываются.

Мне действительно нужнонекоторая помощь в этом, поскольку это для важного проекта.

Я не слишком хорош в jQuery, и я старался изо всех сил, но я действительно застрял.

Вот код: 

jQuery(function( $ )
{
    var about = $( "#about" ),
        contact = $( "#contact" ),
        download = $( "#download" ),
        abouttoggle = $( "#abouttoggle"),
        contacttoggle = $( "#contacttoggle"),
        downloadtoggle = $( "#downloadtoggle"); 

    abouttoggle.click(
        function( event )
        { 
            event.preventDefault(); 
            if ( about.is( ":visible" ) )
            { 
                about.fadeOut( 500 ); 
                abouttoggle.css("background-color","transparent").fadeIn( 500 );
            }
            else
            {
                about.fadeIn( 500 ); 
                abouttoggle.css("background-color","#E0E0E0").fadeIn( 500 );
            }

            contact.fadeOut( 500 ); 
            contact.css("background-color","transparent").fadeIn( 500 );
            download.fadeOut( 500 ); 
            download.css("background-color","transparent").fadeIn( 500 );
        }
    );   

    contacttoggle.click(
        function( event )
        { 
            event.preventDefault(); 
            if ( contact.is( ":visible" ) )
            { 
                contact.fadeOut( 500 ); 
                contacttoggle.css("background-color","transparent").fadeIn( 500 );
            }
            else
            {
                contact.fadeIn( 500 ); 
                contacttoggle.css("background-color","#E0E0E0").fadeIn( 500 );
            }

            about.fadeOut( 500 ); 
            abouttoggle.css("background-color","transparent").fadeIn( 500 );
            download.fadeOut( 500 ); 
            download.css("background-color","transparent").fadeIn( 500 );
        }
    );   

    downloadtoggle.click(
        function( event )
        { 
            event.preventDefault(); 
            if ( download.is( ":visible" ) )
            { 
                download.fadeOut( 500 ); 
                downloadtoggle.css("background-color","transparent").fadeIn( 500 );
            }
            else
            {
                download.fadeIn( 500 ); 
                downloadtoggle.css("background-color","#E0E0E0").fadeIn( 500 );
            }

            contact.fadeOut( 500 ); 
            contact.css("background-color","transparent").fadeIn( 500 );
            about.fadeOut( 500 ); 
            about.css("background-color","transparent").fadeIn( 500 );
        }
    );   

});

и соответствующий HTML-код: 

<div align="center" class="info">
    <a id="abouttoggle" href="#" class="aboutbutton">about</a> | <a id="contacttoggle" href="#" class="contactbutton">contact</a> | <a id="downloadtoggle" href="#" class="downloadbutton">downloads</a>
    </div>

    <div align="center" class="about" id="about">
    about stuff
    </div>

    <div align="center" class="contact" id="contact">
    contact stuff
    </div>

    <div align="center" class="download" id="download">
    download stuff
    </div>

1 Ответ

0 голосов
/ 19 февраля 2012

Вы используете fadeIn в элементах меню сразу после их исчезновения.

Сделайте все эти строки: 

contact.css("background-color","transparent").fadeIn( 500 );

похожими на: 

contacttoggle.css("background-color","transparent").fadeIn( 500 );

Вы делаете это правильно в функции contacttoggle.click.

Вы также можете использовать $(this) вместо предопределения переменных.$(this) ссылается на объект jQuery, на который действует функция.

...