复选框切换菜单

Question

请原谅这个模糊的问题，我真的不确定如何描述我正在寻找的东西，所以我用油漆制作了这个超专业的“图片故事”。

图片1 ：那些有趣的“盒子”类似于html复选框。假设他们有类： checkbox-menu

图片2 ：选中时...

图片3 ：...弹出窗口中包含与此帖无关的内容。

图片4 ：检查网站上的其他复选框时...

图片5 ：... 弹出窗口向下滑动 ...

图片6 ：...到最新选中的复选框。

其他行为是，在外部点击或取消选中已经选中的复选框时会隐藏它。

我真的不知道如何到达那里，我希望有人可以指出我正确的方向，提前谢谢！

Answer 1

这是一个可以帮助您入门的工作演示，但您可以使用更多自定义设置。

jsFiddle

我基于Boostrap Popover上的切换菜单，但实际上，您想创建一个最初隐藏的div，稍后您将控制位置和可见性。这样，您可以在不同的复选框之间进行无缝转换。

在页面上的任意位置声明popover，然后将display设置为hidden

<div id='CheckBoxPopover' class="popover fade right in" style="display: hidden;">
    <div class="arrow"></div>
    <h3 class="popover-title">Some Info</h3>
    <div class="popover-content"></div>
</div>

要在移动时创建漂亮的过渡，您可以使用 CSS 过渡属性，如下所示：

#CheckBoxPopover {
    -webkit-transition: all 1s ease;
       -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
         -o-transition: all 1s ease;
            transition: all 1s ease;    
}

这是页面其余部分的一些HTML：

<div class="checkBoxTips">
    <input type="checkbox"></input>
    <input type="checkbox"></input>
</div>

最后，在 JavaScript 中，您可以控制当有人点击checkBoxTips课程内的输入元素时会发生什么。使用jQuery的offset，您可以获得被单击的元素的位置。然后，您可以.show()或.hide()根据上下文查看可见性。

// create a single access point for your popover
var $pop = $("#CheckBoxPopover");

$('.checkBoxTips input').click(function () {
    var offset = $(this).offset();
    $pop.css('left',offset.left + 20);
    $pop.css('top',offset.top - 25);
    if ($(this).is(":checked")) {
        $pop.show();
    } else {
        $pop.hide();
    }
});

自定义：

如果未选中该项，则可以简单地隐藏弹出窗口，但您可能希望在div中搜索第一个已检查的输入元素。如果有任何结果，则将弹出窗口移动到该位置。如果没有， THEN 你可以隐藏它。像这样：

var $checkedBoxes = $('.checkBoxTips input:checked')
if ($checkedBoxes.length >0) {
    setPopover($checkedBoxes[0]);
} else {
    $pop.hide();
}

当您移动弹出框时，您还可以通过jQuery完全控制任何div内容，因此您应该更改标题或进行所需的任何其他修改。例如，您可以获取当前元素的title属性并将其设置为弹出文本：

var title = $(element).attr("title");
$pop.find("h3.popover-title").text(title);

如果您希望弹出窗口随时隐藏除复选框以外的其他内容，您可以将单击事件处理程序附加到整个文档，这将隐藏弹出窗口。

$(document).click(function () {
    $pop.hide();
});

为了不在每次点击时关闭弹出窗口，你必须告诉输入点击功能到事件的stopPropagation，从冒泡到其他包含这样的元素：

$('.checkBoxTips input').click(function (e) {
    e.stopPropagation();
});

祝你好运！

Answer 2

您应该查看jquery UI Tooltip，您可以自定义其中的大部分内容