单击其他 div 时使 div 可见/不可见

发布于 2024-10-22 02:27:30 字数 278 浏览 5 评论 0原文

有人可以帮助我吗，我需要类似 http://web-kreation.com/demos/login_form_mootools_1 .2/，更简单，当我单击一个 div（在本例中为登录）只是为了显示其他 div 时，如果我再次单击以使其不可见。如果我有两个 div（div id=login 和 div id=vis_unvis），如何使用 Mootools 做到这一点？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

何止钟意 2024-10-29 02:27:30

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

切换可见性 -显示/隐藏任何内容

回复收藏 0 原文

北风几吹夏 2024-10-29 02:27:30

要将示例中的效果复制到最基本的效果，请查看此小提琴：

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 of:

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

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

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

处理这个问题的方法永无止境。也检查 Fx.Move :)

to replicate the effect in the example to it's most basic, look at this fiddle:

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");
        }
    });
})();

with html of:

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

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

and 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;
}

resources for mootools: Fx.Morph or the element prototype .morph() allows you to animate properties of an element, in this case modifying marginTop and opacity.

mootools also supports Fx.Slide, Fx.Reveal and more as part of the mootools-more official collection of plugins.

of course to hide/show, you could just toggleClass a css class which has display: none on the element or use .show() / .hide() or .fade("in") / .fade("out") to hide via opacity.

NO end to ways to handle this. Check Fx.Move too :)

回复收藏 0 原文

~没有更多了~