移动端弹框选择器

最新推荐文章于 2022-01-07 16:51:31 发布
张杰伦i
最新推荐文章于 2022-01-07 16:51:31 发布
阅读量392
点赞数
文章标签： css html jquery
本文链接：https://blog.csdn.net/qq_25750473/article/details/120452179
版权
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL + VUE_APP_ASSETS + '/' %>favicon2.ico" />
    <title>选择器</title>
    <style>
    body{
      margin: 0;
    }
      .Choose{
        width:100vw;
        height:100vh;
        background: #33333330;
        position:fixed;
        z-index:150;
        top:0;
        display:none;
      }
      .Choose__box {
        width:100%;
        max-height:505px;
        position:absolute;
        background:#FFFFFF;
        border-radius: 8px 8px 0px 0px;
        bottom:0;
      }
      .head {
        position:relative;
        width:100%;
        height:48px;
        background: #F4F4F8;
        border-radius: 8px 8px 0px 0px;
        overflow:hidden;
        display:flex;
    }
    .close{
        content:'';
        width:20px;
        height:20px;
        background:url('http://fs.yqfw.cdyoue.com/Fgf4RDegeyItZZILJRF7VjXK4IAV') no-repeat center;
        position:absolute;
        right:14px;
        top:14px;
      }
      .head div:nth-child(1){
        font-family: PingFang SC;
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 48px;
        color: #313C56;
        margin:0 0 0 12px;
      }
    .container {
      height:457px;
      background: #FFFFFF;
      overflow:hidden;
    }
    .container .search {
        width:343px;
        height:45px;
        margin:12px auto;
        background: #FFFFFF;
        border: 1px solid #F0F0F0;
        box-sizing: border-box;
        border-radius: 8px;
        display:flex;
        align-items:center;
      }
      .container .search img{
          width:20px;
          height:20px;
          margin:0 8px 0 12px;
        }
       .container .search .input{
          border:none;
          outline:none;
          font-family: PingFang SC;
          font-style: normal;
          font-weight: normal;
          font-size: 14px;
          line-height: 21px;
          color: #CCCCCC;
        }
      .select {
        height:100%;
        overflow-y:scroll;
      }
      .select details {
          width:351px;
          margin:0 auto;
        }
      .select .first_select{
            color:#44A8F8;
          }
        .select summary{
            height:50px;
            line-height:50px;
            padding-left:5px;
            box-sizing:border-box;
            font-family: PingFang SC;
            font-style: normal;
            font-weight: normal;
            font-size: 14px;
            color: #313C56;
            position:relative;
            display:list-item;
            outline:none;
          }
            summary::-webkit-details-marker { display:block ; margin-right:0;width:16px; height:16px } 
           .select summary .sumTitle{
              display:inline-block;
              margin-left:16.2px
            }
          dl {
            margin:0;
            position: relative;
          }
           dl .seleted {
              color:#44A8F8;
              position:relative;
          
            }
            dl dt.seleted:after{
                content:'';
                position:absolute;
                background:url('http://fs.yqfw.cdyoue.com/FgJm30mWrht9NVD6cARUyTn35MBj') no-repeat center;
                width:18px;
                height:18px;
                top:4px;
                right:0;
              }
           dl dt{
              height:50px;
              padding-left:36px;
              box-sizing:border-box;
              font-family: PingFang SC;
              font-style: normal;
              font-weight: normal;
              font-size: 14px;
              line-height: 50px;
              color: #313C56;
            }
 
        details{
           border-bottom:1px solid #F4F4F8;
        }
        details:last-child {
          border-bottom: none;
        }
    </style>
  </head>
  <body>
    <div class="head-drop">按钮</div>

<div class="Choose">
  <div class="Choose__box">
    <div class="head">
      <div>请选择</div>
      <div class="close"></div>
    </div>
    <div class="container">

      <div class="select">
        <details>
          <summary><div class="sumTitle">第一</div></summary>
          <dl>
              <dt>1</dt>
              <dt>2</dt>
              <dt>3</dt>
          </dl>
        </details>
         <details>
          <summary><div class="sumTitle">第一</div></summary>
          <dl>
              <dt>1</dt>
              <dt>2</dt>
              <dt>3</dt>
          </dl>
        </details>
         <details>
          <summary><div class="sumTitle">第一</div></summary>
          <dl>
              <dt>1</dt>
              <dt>2</dt>
              <dt>3</dt>
          </dl>
        </details>
         <details>
          <summary><div class="sumTitle">第一</div></summary>
          <dl>
              <dt>1</dt>
              <dt>2</dt>
              <dt>3</dt>
          </dl>
        </details>
         <details>
          <summary><div class="sumTitle">第一</div></summary>
          <dl>
              <dt>1</dt>
              <dt>2</dt>
              <dt>3</dt>
          </dl>
        </details>
         <details>
          <summary><div class="sumTitle">第一</div></summary>
          <dl>
              <dt>1</dt>
              <dt>2</dt>
              <dt>3</dt>
          </dl>
        </details>
         <details>
          <summary><div class="sumTitle">第一</div></summary>
          <dl>
              <dt>1</dt>
              <dt>2</dt>
              <dt>3</dt>
          </dl>
        </details>
         <details>
          <summary><div class="sumTitle">第一</div></summary>
          <dl>
              <dt>1</dt>
              <dt>2</dt>
              <dt>3</dt>
          </dl>
        </details>
         <details>
          <summary><div class="sumTitle">第一</div></summary>
          <dl>
              <dt>1</dt>
              <dt>2</dt>
              <dt>3</dt>
          </dl>
        </details>
         <details>
          <summary><div class="sumTitle">第一</div></summary>
          <dl>
              <dt>1</dt>
              <dt>2</dt>
              <dt>3</dt>
          </dl>
        </details>
      </div>
    </div>
  </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script type="text/javascript">
$('.head-drop').click(function(){
  $ ('.Choose').show()
  $('body').css({overflow:'hidden'})
})

$('.Choose .select').on('click','summary',function(){
  if($(this).next().find('dt').hasClass('seleted')) {
    if($(this).parent().attr('open')){
      $(this).addClass('first_select')
    }else{
      $(this).removeClass('first_select')
    }
  }
})
$('.Choose .select dl').on('click','dt',function(){
  $('.Choose .select dl dt').removeClass('seleted')
  $(this).addClass('seleted')
})
$('.close').click(function(){
  $('.Choose').hide()
    $('body').css({overflow:'auto'})
})
   </script>
  </body>
</html>