Question

我有无序列表，我想创建一个多级下拉列表，它应该像我点击该下拉列表而不是悬停它应该显示列表，如果列表中的内容有子列表，如果我们点击在该子列表上，pop应该出现在当前下拉列表上方，子列表和右上角有一个X标记。如果我点击X，它应该关闭弹出窗口。（我不应该使用bootstrap）

这是我的Html代码

    <ul id="nav"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#"> Menu2&nbsp; <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&nbsp; <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>

Answer 1

您可以使用此导航栏并更改名称

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="homepage-img" id="img-home">
        <div class="logo"><img src="../images/Logo3.svg"></div>
        <div class="navbar-header">
            <button aria-controls="navbar" aria-expanded="false" class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
        </div>
        <div class="navbar-collapse collapse" id="navbar">
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a class="menu" href="/" id="active"><i class="icon-025-home"></i> الرئيسية</a>
                </li>
                <li>
                    <a class="menu" href="about"><i class="icon-010-group"></i> من نحن</a>
                </li>
                <li class="dropdown">
                    <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle menu" data-toggle="dropdown" role="button" style="cursor:pointer"><i class="icon-016-shop"></i> المتجر<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="/store/balanceCard"><i class="icon-022-smartphone"></i> كروت شحن</a>
                        </li>
                        <li>
                            <a href="/store/phoneBill"><i class="icon-018-telephone"></i> فاتورة الأرضي</a>
                        </li>
                        <li>
                            <a href="/store/internetBill"><i class="icon-024-earth"></i> فاتورة الانترنت</a>
                        </li>
                        <li>
                            <a href="/store/withdrawMoney"><i class="icon-atm"></i> سحب/تحويل الأموال</a>
                        </li>
                        <li>
                            <a href="store"><i class="icon-028-more"></i> المزيد</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a class="menu" href="contact"><i class="icon-026-email"></i> اتصل بنا</a>
                </li>
                <li class="dropdown">
                    <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle menu" data-toggle="dropdown" role="button" style="cursor:pointer"><i class="icon-028-more"></i> المزيد<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="fees"><i class="icon-002-money"></i> الرسوم</a>
                        </li>
                        <li>
                            <a href="privacy"><i class="icon-016-shield"></i> سياسة الخصوصية</a>
                        </li>
                        <li>
                            <a href="security"><i class="icon-006-padlock"></i> الأمان</a>
                        </li>
                        <li>
                            <a href="faq"><i class="icon-016-faq"></i> الأسئلة الأكثر شيوعاً</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="clearfix"></div>
        <div class="name-header" id="yoo">
            <h1>المتجر</h1>
            <p>خدمة الدفع والسحب الألكترونية الأولي من نوعها في مصر.</p>
        </div>
    </div>
</nav>

并使用此脚本

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js">
</script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>

下载Bootstrap v3.3.5 css

https://github.com/twbs/bootstrap/archive/v3.3.5.zip

如何使用jquery创建多级下拉列表？

1 个答案: