浮动按钮与上下文菜单和形式按需

Question

我正在尝试创建将浮动在内容之上的html表单。按钮将浮动在内容上，点击每个按钮时，下方会显示不同的div形式。像下面的屏幕截图一样。它仅在首次出现时显示按钮，并且在表单下方的每个按钮上单击应该附加并显示。如果是最后一个按钮，则应显示带有附加按钮的上下文菜单。

我试图创建按钮和表单，但如何：

1）为button1，button2 ...添加给予按钮类型，即div

2）点击最后一个按钮上的显示上下文菜单

3）点击相应的按钮

隐藏并显示相应的表格

jsbin

＆＃13;

＆＃13;

empty

＆＃13;

@section('title', "Search \"" . empty($search) ? null : $search . "\" | Myshop")

＆＃13;

＆＃13;

＆＃13;

Answer 1

1）个性化CSS - 符合您的个人品味。更改背景颜色和/或光标可能会添加您需要的效果，例如

.divbutton:hover
{
    cursor:pointer;
}

应该帮助你。 （将class='divbutton'添加到每个div作为按钮）

3） 创建这些样式类

.hiddenitem
    {
      display:none;
    }

.shownitem
    {
      display:block;
    }

为每个表单添加.hidenitem类

<div id="form1" class="hiddenitem">
    This is form 1 on click of button 1 it appears 
</div>

在您的脚本文件或标记

中

activateMenu = function (menuId)
{
     $("#form" + menuId).toggleClass('shownitem');
}

最后将onclick='activateMenu(menuId)'添加到每个相应的按钮

<div id="button2" onclick='activateMenu(2)'>
                                    TEXT1
</div>

对于2）使用与表单相同的方法：在html中创建上下文菜单，应用.hidenitem类并创建切换函数以在菜单上切换.shownitem类，使用自己的id作为选择器。

编辑：JSFiddle