Question

任何人都可以帮助我，我需要像http://web-kreation.com/demos/login_form_mootools_1.2/这样的东西，只需简单一点，当我点击一个div（在这种情况下登录）只是为了显示其他人，如果我再次点击使其变得不可见。如果我有两个div（div id = login和div id = vis_unvis），如何使用Mootools？

Answer 1

请参阅以下主题以了解更多如何通过javascript切换元素的可见性：

Toggle Visibility - Show/Hide Anything

Answer 2

将示例中的效果复制到最基本的位置，看看这个小提琴：

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：

#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和不透明度。

mootools还支持Fx.Slide，Fx.Reveal以及更多作为mootools-more官方插件集合的一部分。

当然要隐藏/显示，您可以toggleClass在元素上display: none的css类或使用.show() / .hide()或.fade("in") / .fade("out")通过不透明来隐藏。

没有办法解决这个问题。检查Fx.Move也：）

单击其他div时显示可见/不可见的div

2 个答案: