-4
私はマルチレベルのドロップダウンを作成したいという順序のないリストを持っています。そのドロップダウンをクリックするとリストが表示されるはずです。リストの内容にサブリストがあり、そのサブリストは、現在のドロップダウンの上にサブリストと右上のXマークが表示されます.Xをクリックすると、ポップアップが閉じます。 （私は、ブートストラップを使用しないでください）jqueryを使用してマルチレベルのドロップダウンを作成するには？
これは私のHTMLコード
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#"> Menu2 <img alt="" src="Images/warning.png" style=" border:0px;" /></a>
<ul id="subnav">
<li><a href="#">SubMenu1</a></li>
<ul>
<li><a href="#">Sub1Sub2menu1</a></li>
<li><a href="#">Sub1Sub2menu2</a></li>
<li><a href="#">Sub1Sub2menu3</a></li>
</ul>
<li><a href="#">SubMenu2</a></li>
<li><a href="#">SubMenu3</a></li>
<li><a href="#">SubMenu4</a></li>
<li><a href="#">SubMenu5</a></li>
<li><a href="#">SubMenu6</a></li>
<li><a href="#">SubMenu7</a></li>
</ul>
</li>
<li><a href="#">Menu3 <img alt="" src="Images/warning.png" style=" border:0px;" /></a>
<ul>
<li><a href="#">Sub1Menu1</a></li>
<li><a href="#">Sub1Menu2</a></li>
</ul>
</li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
</ul>
であり、これは私のCSSです：
#nav
{
margin:0; padding:0; list-style:none; width:640px; height:37px;
}
#nav li
{
float:right; display:block; width:124px; position:relative; z-index:500; text-decoration:none;
}
#nav li a
{
display:block; height:37px; line-height:37px; text-decoration:none; color:#fff; text-align:center; color:#000;
}
#nav li a:hover
{
color:Green;
}
#nav a.selected
{
color:#000;
}
#nav ul
{
position:absolute; right:0; display:none; padding:0; list-style:none; background-color:#c5c9cc; border: solid 1px #c5c9cc;
-moz-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px;
}
#nav ul li
{
width:124px; float:right;
}
#nav ul ul
{
width:124px; float:right; margin:0px 124px 0px 0px; display:block; border-radius: 10px 0 0 10px;
}
#nav ul a
{
display:block; height:30px; color:#000; line-height:30px; text-decoration:none;
}
#nav li ul ul {
margin:0px 124px 0 10px;
}
#nav ul a:hover
{
text-decoration:none;
}
*html #nav ul
{
margin:0 0 0 -2px;
}
そして、これは私のjQueryのコードです：
<script type="text/javascript">
$(document).ready(function() {
$('#nav li').hover(
function() {
//show its submenu
$('ul', this).slideDown(200);
$('#subnav ul', this).css({ visibility: "hidden" });
},
function() {
//hide its submenu
$('ul', this).slideUp(200);
}
);
$('#subnav').hover(
function() {
//show its submenu
$('#subnav ul', this).css({ visibility: "visible" });
$('#subnav ul', this).slideDown(200);
},
function() {
//hide its submenu
$('#subnav ul', this).slideUp(200);
}
);
});
</script>
あなたの試みを、私を支払うか、私を見る –
:) –
あなたが尋ねたのと同じ方法で私に答えさせてください。あなたはjqueryとそれにいくつかのCSSを使用し、次にをクリックするとリストが表示され、リスト内の項目にサブ項目がある場合、カーソルを置くと展開されます。 （ブートストラップは使用しないでください） ここにアクセスしてください> https://stackoverflow.com/help/how-to-ask – user5014677