javascript+语义ui:垂直菜单与项目之间的对话框，如何

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

本文关键字：之间 对话框 如何 项目 ui 语义 垂直 菜单 javascript+      更新时间：2023-09-26

我想要什么，垂直菜单：

menu item 1
menu item 2

用户按下CCD_ 1并且在同一页面上，在两个菜单项之间显示输入对话框：

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

两个创建vertical menu list和对话有这样的内容，但如何将它们结合起来呢？

要实现您想要的功能，您可以尝试使用手风琴菜单，请参阅以下示例：

$(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>

希望有帮助，

相关文章：