javascript + semantic ui：带有项目间对话框的垂直菜单，怎么样？

Question

我要的，垂直菜单：

menu item 1
menu item 2

用户按下 menu item 1 并在同一页面上，在两个菜单项之间出现输入对话框：

menu item 1
  input field 1
  input field 2
  button
menu item 2

两个创建 vertical menu list 和对话内容如此之多，如何将它们结合起来？

Answer 1

要实现您想要的效果，您可以尝试使用 accordion menu，请参见以下示例：

$(document).ready(function(){
  // init the accordion on the menu
  $('.ui.accordion').accordion();
});

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>

<div class="ui vertical fluid accordion menu">
 <div class="item">
  <a class="title">
   <i class="dropdown icon"></i>Menu item 1
  </a>
  <div class="content">
   <div class="ui form transition hidden">
    <form class="ui form">
     <div class="field">
      <label>Input field 1</label>
      <input type="text" name="first-name" placeholder="Input field 1">
     </div>
     <div class="field">
      <label>Input field 2</label>
      <input type="text" name="last-name" placeholder="Input field 2">
     </div>
     <button class="ui button" type="submit">Button</button>
    </form>
   </div>
  </div>
 </div>
 <div class="item">
  <a class="title">
   <i></i>Menu item 2
  </a>
 </div>
</div>

希望对您有所帮助，

javascript + semantic ui：带有项目间对话框的垂直菜单，怎么样？

javascript + semantic ui: vertical menu with dialog between items, how?

html

javascript

semantic-ui