js實(shí)現(xiàn)下拉框效果（select）

更新時(shí)間：2017年03月28日 08:45:49 作者：大大大大糖糖

本文主要介紹了js實(shí)現(xiàn)下拉框效果的方法實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來看下吧

效果圖：

代碼如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html >
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css">
    *{padding: 0;margin:0;}
    ul,li{list-style: none}
    .left{float: left;}
    .right{float: right;}
    .select_contain{font-size: 14px;color: #333;line-height: 38px;margin: 30px 0;}
    .select_item{margin-right: 50px;position: relative;}
    .select_tit{margin-right: 20px;}
    .select_result{width: 100px;line-height: 38px;border:1px solid #ccc;text-align: center;border-radius: 4px;text-indent: -8px;cursor:pointer;}
    .select_result .triangle{border:5px solid transparent;border-top:5px solid #666;position: absolute;top: 16px; right:8px;}
    .select_item ul{display:none;position:absolute;top:100%;right:0;width:100px;background: #f3f3f3;border:1px solid #ccc;border-radius:0 0 4px 4px; border-top-color:#f3f3f3;margin-top:-4px;}
    .select_item ul li{text-align: center;cursor: pointer;}
    .select_item ul li:hover{background: #f4a100; color: #fff;}
  </style>
  <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
  <script>
  function select(){
    $(document).click(function(){
      $(".select_module_con ul").slideUp();
    })
    var module=$(".select_result"); 
    module.click(function(e){
      e.stopPropagation();
      var ul=$(this).next();
      ul.stop().slideToggle();
      ul.children().click(function(e){
        e.stopPropagation();
        $(this).parent().prev().children("span").text($(this).text());
        ul.stop().slideUp();
      })
    })
  }
  $(function(){
    select(); 
  })
  </script>
</head>
<body>
  <div class="select_contain">
      <div class="select_item clearfix left">
        <div class="select_tit left">選擇節(jié)目:</div>
        <div class="select_module_con left">
          <div class="select_result">
            <span>選擇節(jié)目</span>
            <div class="triangle"></div>
          </div>
          <ul>
            <li>節(jié)目1</li>
            <li>節(jié)目2</li>
            <li>節(jié)目3</li>
          </ul>
        </div>
      </div>
      <div class="select_item clearfix left">
        <div class="select_tit left">選擇嘉賓:</div>
        <div class="select_module_con left">
          <div class="select_result">
            <span>選擇嘉賓</span>
            <div class="triangle"></div>
          </div>
          <ul>
            <li>嘉賓1</li>
            <li>嘉賓2</li>
            <li>嘉賓3</li>
          </ul>
        </div>
      </div>
   </div>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

js
下拉框

相關(guān)文章

微信小程序使用ucharts在小程序中加入橫屏展示功能的全過程
這篇文章主要給大家介紹了關(guān)于微信小程序使用ucharts在小程序中加入橫屏展示功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2022-09-09
用box固定長(zhǎng)寬實(shí)現(xiàn)圖片自動(dòng)輪播js代碼
這篇文章主要介紹了用box固定長(zhǎng)寬實(shí)現(xiàn)圖片自動(dòng)輪播效果,需要的朋友可以參考下
2014-06-06
axios處理重復(fù)請(qǐng)求的方法小結(jié)
這篇文章主要為大家詳細(xì)介紹了如何使用發(fā)布訂閱者模式來處理重復(fù)的axios請(qǐng)求,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-03-03
Bootstrap實(shí)現(xiàn)導(dǎo)航欄的2種方式
這篇文章主要為大家詳細(xì)介紹了Bootstrap實(shí)現(xiàn)導(dǎo)航欄的2種方式，一是利用按鈕組實(shí)現(xiàn)、二是Bootstrap專門做了相應(yīng)的css類,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
JavaScript時(shí)間操作之年月日星期級(jí)聯(lián)操作
這篇文章主要介紹了JavaScript時(shí)間操作之級(jí)聯(lián)日期選擇操作，涉及到年、月、日、星期，感興趣的小伙伴們可以參考一下
2016-01-01
JavaScript處理解析JSON數(shù)據(jù)過程詳解
JSON 是 JavaScript 原生格式，也就是說在 JavaScript 中處理 JSON 數(shù)據(jù)不需要任何特殊的 API 或工具包。接下來，本文給大家介紹JavaScript處理解析JSON數(shù)據(jù)過程詳解，感興趣的朋友快來了解了解吧
2015-09-09
js+css 實(shí)現(xiàn)遮罩居中彈出層(隨瀏覽器窗口滾動(dòng)條滾動(dòng))
本文為大家詳細(xì)介紹下使用js實(shí)現(xiàn)遮罩彈出層居中，且隨瀏覽器窗口滾動(dòng)條滾動(dòng)，示例代碼如下，感興趣的朋友可以參考下
2013-12-12
javascript如何使用函數(shù)random來實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名方法詳解
這篇文章主要介紹了javascript如何使用函數(shù)random來實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名方法詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
javaScript 關(guān)閉瀏覽器 (不彈出提示框)
如果網(wǎng)頁(yè)不是通過腳本程序打開的（window.open()），調(diào)用window.close()腳本關(guān)閉窗口前，必須先將window.opener對(duì)象置為null，否則瀏覽器（IE7、IE8）會(huì)彈出一個(gè)確定關(guān)閉的對(duì)話框。
2010-01-01
詳解微信圖片防盜鏈“此圖片來自微信公眾平臺(tái) 未經(jīng)允許不得引用”的解決方案
這篇文章主要介紹了詳解微信圖片防盜鏈“此圖片來自微信公眾平臺(tái) 未經(jīng)允許不得引用”的解決方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-04-04