Сделайте видимый / невидимый div при нажатии на другой div - PullRequest
Новая
       24

Сделайте видимый / невидимый div при нажатии на другой div

0 голосов
/ 11 марта 2011

Кто-нибудь может мне помочь, мне нужно что-то вроде http://web -kreation.com / demos / login_form_mootools_1.2 / , просто намного проще, когда я нажимаю на один div (логин в этом случае) просточтобы показать другим, и если я нажму еще раз, чтобы сделать невидимым.Как это сделать с Mootools, если у меня есть два div (div id = login и div id = vis_unvis)?

Ответы [ 2 ]

1 голос
/ 12 марта 2011

, чтобы скопировать эффект в примере на его основные, посмотрите на эту скрипку:

http://jsfiddle.net/dimitar/9Syj3/

(function() {
    var loginOpen = false, loginForm = document.id("login").set("morph", {
        link: "chain"
    }).setOpacity(0);

    document.id("toggler").addEvents({
        click: function() {
            loginForm.morph((loginOpen) ? {
                marginTop: -90,
                opacity: 0
            } : {
                marginTop: 0,
                opacity: 1
            });
            loginOpen = !loginOpen;            
            this.set("text", loginOpen ? "Hide form" : "Show form");
        }
    });
})();

с html: 

<div id="login">
This be the login form
</div>

<div id="toggler">Show form</div>

и css of: 

#login {
    width: 300px;
    background: #ccc;
    height: 50px;
    padding: 10px;
    position: absolute;
    margin-top: -90px;
    margin-left: 300px;
    z-index: 1000;
    -moz-box-shadow: 0 0px 3px 3px #000;
}

ресурсы для mootools: Fx.Morph или прототип элемента .morph() позволяет анимировать свойства элемента, в этом случае изменяя marginTop и opacity.

mootools также поддерживает Fx.Slide , Fx.Reveal и другие как часть официальной коллекции плагинов mootools-more.

конечно, чтобы скрыть / показать, вы можете просто toggleClass класс css с display: none на элементе или использовать .show () / .hide () или .fade("in") / .fade("out") скрыть через непрозрачность.

Нет конца способам справиться с этим. Проверьте Fx.Move тоже:)

1 голос
/ 11 марта 2011

Пожалуйста, обратитесь к следующей ветке, чтобы узнать больше о том, как переключать видимость элемента с помощью javascript:

Переключить видимость - показать / скрыть что-либо

...