• <s id="ho4ga"></s>
    1. <em id="ho4ga"><acronym id="ho4ga"></acronym></em>
    2. <button id="ho4ga"><object id="ho4ga"></object></button>
    3. <tbody id="ho4ga"></tbody>
    4. 微信掃碼登錄 ×
      基于jquery聯動菜單的選擇器

      基于jquery聯動菜單的選擇器

      收藏
      基于jquery聯動菜單的選擇器
      【原創】jquery制作一款分類菜單選擇器,點擊彈出下拉菜單,三級聯動選擇器。適用于多分類菜單選擇代碼。

      相關標簽

      使用方法:

      1、head引入css文件

      <link rel="stylesheet" href="css/qrm-pinming.css">
      

      2、body引入HTML代碼

      <!--品名開始-->
      <div class="box">
      	<div class="qrm-pinming">
      	    <div class="qrm-input-border">
      	        <!--<span class="title">品名</span>-->
      	        <input type="text" placeholder="請選擇" class="qrm-input" style="width: 250px">
      	    </div>
      	    <!--<div class="qrm-pinming-panel" style="display:none">-->
      	        <div class="qrm-border1" style="display:none">
      	            <ul class="qrm-lev-1 qrm-lev">
      	                <!--統料-->
      	                <li class="active">
      	                    <span>我是一級01</span><i class="qrm-arrow-right"></i>
      	                    <ul class="li-zi-1" style="display: none">
      	                        <li>
      	                            <span>我是二級01</span><i class="qrm-arrow-right"></i>
      	                            <ul class="li-zi-2" style="display: none">
      	                                <li>
      	                                    <span>我是三級1-1</span>
      	                                </li>
      	                                <li>
      	                                    <span>我是三級1-2</span>
      	                                </li>
      	                                <li>
      	                                    <span>我是三級1-3</span>
      	                                </li>
      	                            </ul>
      	                        </li>
      	                        <li>
      	                            <span>我是二級02</span><i class="qrm-arrow-right"></i>
      	                            <ul class="li-zi-2" style="display: none">
      	                                <li>
      	                                    <span>我是三級2-1</span>
      	                                </li>
      	                                <li>
      	                                    <span>我是三級2-2</span>
      	                                </li>
      	                                <li>
      	                                    <span>我是三級2-3</span>
      	                                </li>
      	                            </ul>
      	                        </li>
      	                        <li>
      	                            <span>我是二級03</span><i class="qrm-arrow-right"></i>
      	                            <ul class="li-zi-2" style="display: none">
      	                                <li>
      	                                    <span>我是三級3-1</span>
      	                                </li>
      	                                <li>
      	                                    <span>我是三級3-2</span>
      	                                </li>
      	                                <li>
      	                                    <span>我是三級3-3</span>
      	                                </li>
      	                            </ul>
      	                        </li>
      	                        <li>
      	                            <span>我是二級04</span>
      	                        </li>
      	                    </ul>
      	                </li>
      	            </ul>
      	            <p class="clearfix"></p>
      	        </div>
      	        <div class="qrm-border2" style="display:none">
      	            <ul class="qrm-lev-2 qrm-lev">
      	
      	            </ul>
      	            <p class="clearfix"></p>
      	        </div>
      	        <div class="qrm-border3" style="display:none">
      	            <ul class="qrm-lev-3 qrm-lev">
      	
      	            </ul>
      	            <p class="clearfix"></p>
      	        </div>
      	        <div class="qrm-border4" style="display:none">
      	            <ul class="qrm-lev-4 qrm-lev">
      	
      	            </ul>
      	            <p class="clearfix"></p>
      	        </div>
      	        <p class="clearfix"></p>
      	    <!--</div>-->
      	    <p class="clearfix"></p>
      	</div>
      </div>
      <!--品名結束-->
      
      <script src="js/jquery.min.js"></script>
      <script src="js/qrm-pinming.js"></script>
      

      使用聲明

      1. 本站所有素材(未指定商用),僅限學習交流。
      2. 會員在本站下載的原創商用和VIP素材后,只擁有使用權,著作權歸原作者及17素材網所有。
      3. 原創商用和VIP素材,未經合法授權,請勿用于商業用途,會員不得以任何形式發布、傳播、復制、轉售該素材,否則一律封號處理。
      4. 本平臺織夢模板僅展示和個人非盈利用途,織夢系統商業用途請預先授權。
      5. 如果素材損害你的權益請聯系客服QQ:3264130392給予處理。

      x
      ×
      ×

      注冊

      QQ注冊 立即下載 微信注冊 立即下載

      簽到成功!

      已連續簽到1天,連續簽到3天可獲得50積分

      知道了
      国产女人高潮抽搐喷浆视频
    5. <s id="ho4ga"></s>
      1. <em id="ho4ga"><acronym id="ho4ga"></acronym></em>
      2. <button id="ho4ga"><object id="ho4ga"></object></button>
      3. <tbody id="ho4ga"></tbody>