Javascript + semantische UI: vertikales Menü mit Dialog zwischen den Elementen, wie?

Question

, was ich will, vertikales Menü:

menu item 1 
menu item 2 

Benutzer gedrückt menu item 1 und auf der gleichen Seite, erscheinen Eingabedialog zwischen zwei Menüpunkte:

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

Es ist ziemlich einfach, zwei schaffen vertical menu list und Dialog mit solchen Inhalten, aber wie kombiniert man sie?

Answer 1

Um das zu erreichen, was Sie möchten, mit einem accordion menu versuchen können, finden Sie im folgen Beispiel:

$(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"> 
 
\t <div class="item"> 
 
\t \t <a class="title"> 
 
\t \t \t <i class="dropdown icon"></i>Menu item 1 
 
\t \t </a> 
 
\t \t <div class="content"> 
 
\t \t \t <div class="ui form transition hidden"> 
 
\t \t \t \t <form class="ui form"> 
 
\t \t \t \t \t <div class="field"> 
 
\t \t \t \t \t \t <label>Input field 1</label> 
 
\t \t \t \t \t \t <input type="text" name="first-name" placeholder="Input field 1"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="field"> 
 
\t \t \t \t \t \t <label>Input field 2</label> 
 
\t \t \t \t \t \t <input type="text" name="last-name" placeholder="Input field 2"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <button class="ui button" type="submit">Button</button> 
 
\t \t \t \t </form> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="item"> 
 
\t \t <a class="title"> 
 
\t \t \t <i></i>Menu item 2 
 
\t \t </a> 
 
\t </div> 
 
</div>

Hoffe, dass es hilft,