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：垂直菜单，项目之间有对话，怎么样？

1 个答案: