jQuery點(diǎn)擊彈出下拉菜單的小例子

更新時(shí)間：2013年08月01日 15:46:34 作者：

這篇文章介紹了jQuery點(diǎn)擊彈出下拉菜單的小例子，有需要的朋友可以參考一下

<title>導(dǎo)航——點(diǎn)擊彈出內(nèi)容</title>
    <style type="text/css">
.navgation{margin:0;padding:0;list-style-type:none;position:relative;}
.navgation li {float:left;}
.navgation a{padding:3px 6px;background-color:orange;color:white;text-decoration:none;float:left;height:24px;}
.navgation a:hover {background-color:white;color:blue;text-decoration:underline;}
.navgation div{display:none;position:absolute;top:30px;}
</style>
    <script src="Jquery1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".navgation input").each(function () {
                var this_div = $(".navgation div");
                var _inx = $(".navgation input").index(this);
                $(this).click(
                function () { this_div.eq(_inx).slideToggle(); },
                function () { this_div.eq(_inx).slideToggle(); }
           );
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ul class="navgation">
            <li><input type="button" id="button" value="鏈接1"/>
            <div>這里放下拉內(nèi)容1</div>
            </li>
            <li><input type="button" id="button1" value="鏈接2"/>
            <div>這里放下拉內(nèi)容2</div>
            </li>
            <li><input type="button" id="button2" value="鏈接3"/>
            <div>這里放下拉內(nèi)容3</div>
            </li>
            <li><input type="button" id="button3" value="鏈接4"/>
            <div>這里放下拉內(nèi)容4</div>
            </li>
            <li><input type="button" id="button4" value="鏈接5"/>
            <div>這里放下拉內(nèi)容5</div>
            </li>
        </ul>
    </div>
    </form>
</body>

您可能感興趣的文章:

相關(guān)文章

一些實(shí)用的jQuery代碼片段收集
今天總結(jié)一下學(xué)習(xí)jQuery時(shí)中遇到的一些常用的jQuery代碼，這些代碼片段可能在我們急需的時(shí)候能起到幫助。
2011-07-07
字段太多jquey快速清空表單內(nèi)容方法
一個(gè)復(fù)雜查詢的頁面，字段太多了，填了一次，想清空挺麻煩的，于是想到了jquery，下面是實(shí)現(xiàn)代碼
2014-08-08
jQuery實(shí)現(xiàn)仿新浪微博浮動(dòng)的消息提示框(可智能定位)
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿新浪微博浮動(dòng)的消息提示框,具有智能定位功能,涉及jQuery控制頁面元素浮動(dòng)效果的實(shí)現(xiàn)技巧,需要的朋友可以參考下
2015-10-10
jQuery 1.9移除了$.browser可以使用$.support來替代
這篇文章主要介紹jQuery 1.9 移除了 $.browser 的替代方法,需要的朋友可以參考下
2014-09-09
基于jQuery的ajax功能實(shí)現(xiàn)web service的json轉(zhuǎn)化
前面文章說過下次會(huì)給大家介紹詳細(xì)的基于web Services的JqueryAjax調(diào)用如何把一個(gè)datatable得數(shù)據(jù)轉(zhuǎn)化成JSON數(shù)據(jù),然后在客戶端再通過json2.js轉(zhuǎn)化成javascript對(duì)象。
2009-08-08
jquery 經(jīng)典動(dòng)畫菜單效果代碼
JS·經(jīng)典·炫彩菜單(動(dòng)畫效果) for jquery
2010-01-01
jquery.fastLiveFilter.js實(shí)現(xiàn)輸入自動(dòng)過濾的方法
這篇文章主要介紹了jquery.fastLiveFilter.js實(shí)現(xiàn)輸入自動(dòng)過濾的方法,涉及jquery鼠標(biāo)事件及字符串遍歷的相關(guān)技巧,簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2015-08-08
jquery插件canvaspercent.js實(shí)現(xiàn)百分比圓餅效果
這篇文章主要為大家詳細(xì)介紹了jquery插件canvaspercent.js實(shí)現(xiàn)百分比圓餅效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
jQuery實(shí)現(xiàn)輪播圖及其原理詳解
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)輪播圖及其原理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-08-08
jQuery常見開發(fā)技巧詳細(xì)整理
jquery開發(fā)過程中經(jīng)驗(yàn)豐富可以提高開發(fā)技巧，本文整理了一些常見的jquery開發(fā)技巧，有需要的朋友可以參考下
2013-01-01