The menu is Level 2 and collapsed during initialization. Click the title of the item to display the Level 2 list.
The HTML code is as follows:
Copy codeThe Code is as follows: <body>
<Div class = "mainleftFAQ">
<Div class = "category">
</Div>
<Div id = "disp">
</Div>
<Div class = "bartitleFAQ">
<span class = "admintext11"> service management </span> </div>
<Div class = "FAQlist">
<Ul>
<Li> <a href = '#'> waiting for submission </a> </li>
<Li> <a href = '# 'title = ''> awaiting release </a> </li>
<Li> <a href = '# 'title = ''> formal project </a> </li>
<Li> <a href = '# 'title = ''> click here to add </a> </li> </ul>
</Div>
<Div class = "bartitleFAQ">
<span class = "admintext11"> Update process </span> </div>
<Div class = "FAQlist">
<Ul>
<Li> <a href = '#'> background search </a> </li>
<Li> <a href = '# 'title = ''> Update process </a> </li>
</Div>
<Div class = "bartitleFAQ">
<span class = "admintext11"> FAQ management </span> </div>
<Div class = "FAQlist">
<Ul>
<Li> <a href = '#'> waiting for submission </a> </li>
<Li> <a href = '# 'title = ''> awaiting release </a> </li>
<Li> <a href = '# 'title = ''> formal project </a> </li>
<Li> <a href = '# 'title = ''> click here to add </a> </li> </ul>
</Div>
<Div class = "bartitleFAQ">
<span class = "admintext11"> download management </span> </div>
<Div class = "FAQlist">
<Ul>
<Li> <a href = '#'> waiting for submission </a> </li>
<Li> <a href = '# 'title = ''> awaiting release </a> </li>
<Li> <a href = '# 'title = ''> formal project </a> </li>
<Li> <a href = '# 'title = ''> click here to add </a> </li> </ul>
</Div>
<Div class = "bartitleFAQ">
<span class = "admintext11"> back to home </span> </div>
</Div>
</Body>
Among them, JQUERY script can achieve the desired effect with just a few simple lines. The Code is as follows:Copy codeThe Code is as follows: <script language = "javascript" type = "text/javascript">
$ (Document). ready (function (){
// Set the level-2 menu to invisible
$ (". FAQlist" ).css ("display", "none ");
// Click the event triggered by the level-1 menu
$ (". BartitleFAQ"). click (function (){
$ (". FAQlist" ).css ("display", "none"); // set all level-2 menus to invisible
$ (This). next (". FAQlist" ).css ("display", "block"); // set the level-2 menu of the current level-1 menu to visible
})
})
</Script>
