jquery - 使用Metro UI CSS的魅力栏

我是Web开发的新手.........

我已经使用Metro UI CSS创建了this

我现在正在尝试模仿Charms Bar。

我希望当用户单击主题按钮时，应在右侧显示一个包含一些控件等的栏。当失去焦点时(用户在栏外单击)，该栏应隐藏。

使用<div class="charms">添加了Charms栏，我还添加了style="display:none;"，以使栏在启动时不可见。

然后，当用户选择主题按钮或文本时，我使用以下代码进行显示

$(document).click(function(event)
{
var $target = $(event.target);
var target = event.target;

if (!target.id.indexOf("theme")) //if the target id contains "theme" then show charms bar
{
    $("div .charms").fadeIn(600)
}

else
{
    if (target.id != "charms")  //if the charms bar itseff is NOT clicked
        $("div .charms").fadeOut(600)
}
});

我不喜欢此代码，因为当我单击 super 按钮栏上的控件时，它会隐藏该栏本身。

我需要做的就是创建一个 float 栏，当用户单击按钮时该栏可见，而在用户单击其他内容时隐藏该栏……。

最佳答案

你在做什么，像这样的事情:

Use Event Like mousemove : to populate Charms bar see below :

See DEMO

将鼠标移到右侧窗口。