关于前端:更多展开菜单

48次阅读
共计 3421 个字符，预计需要花费 9 分钟才能阅读完成。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .slider-list-wraper {
        background-color: #fff;
        display: flex;
        align-items: baseline;
        padding: 15px 0;
        padding-left: 30.5px;
        width: 800px;
      }
      .slider-list-wraper + .slider-list-wraper {border-top: solid 0.5px #dcdcdc;}
      .slider-list-wraper .title {
        font-size: 14px;
        color: #333333;
        width: 120px;
        white-space: nowrap;
        display: flex;
        align-items: center;
      }
      .slider-list-wraper .title span {
        font-size: 16px;
        color: #169e71;
      }

      .industry_slider_list .option_line .option_one.this {
        color: #009b73;
        border: none;
        position: unset;
      }
      .option_line {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        width: 89%;
        /* overflow: hidden; */
        /* max-height: 20px; */
        /* overflow: hidden; */
      }
      .option_line .option_line_warp {
        display: flex;
        align-items: center;
        width: 80%;
        overflow: hidden;
        /* flex-wrap: wrap ; */
        max-height: 20px;
        overflow: hidden;
      }
      .option_line .show_menu {
        flex-wrap: wrap;
        max-height: none;
        height: auto;
      }
      .option_line .show_menu .option_one {margin-bottom: 10px;}
      .option_line .more_show_btn {
        cursor: pointer;
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #333;
        background-color: #fff;
        margin: 0 2px;
        border: 1px solid #e1e4eb;
        padding: 0 4px;
        border-radius: 4px;
        cursor: pointer;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
      }
      .option_line .more_show_btn img {
        width: 12px;
        margin-right: 2px;
      }
      .option_line .more_show_btn.more_show_btn2 {
        display: none;
        border-color: #009b73;
        color: #009b73;
      }
      .option_line .option_one {
        display: flex;
        align-items: center;
        font-size: 12px;
        letter-spacing: 0px;
        color: #333333;
        margin-right: 5px;
        border-radius: 13.3px;
        padding: 4px 14px;
        cursor: pointer;
        white-space: nowrap;
      }
      .option_line .option_one img {width: 100%;}
      .option_line .option_one .ruchang {
        border-radius: 8.8px;
        margin-right: 6.5px;
      }

      .option_line .option_one .ruchang img {
        width: 18.5px;
        border: solid 0.5px #c1c1c1;
        height: 18px;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <div class="slider-list-wraper industry_slider_list">
      <div class="title"> 题目 <span></span></div>

      <div class="option_line">
        <div class="option_line_warp">
          <div class="option_one industry_id" style="padding: 1.5px 5px">
            选项选项选项选项选项
          </div>

          <div class="option_one industry_id" style="padding: 1.5px 5px">
            选项
          </div>

          <div class="option_one industry_id" style="padding: 1.5px 5px">
            选项选项选项选项选项
          </div>

          <div class="option_one industry_id" style="padding: 1.5px 5px">
            选项选项选项选项选项
          </div>

          <div class="option_one industry_id" style="padding: 1.5px 5px">
            选项选项选项选项选项
          </div>

          <div class="option_one industry_id" style="padding: 1.5px 5px">
            选项
          </div>
          <div class="option_one industry_id" style="padding: 1.5px 5px">
            选项选项选项选项选项
          </div>

          <div class="option_one industry_id" style="padding: 1.5px 5px">
            选项
          </div>

          <div class="option_one industry_id" style="padding: 1.5px 5px">
            选项选项选项选项选项
          </div>

          <div class="option_one industry_id" style="padding: 1.5px 5px">
            选项选项选项选项选项
          </div>

          <div class="option_one industry_id" style="padding: 1.5px 5px">
            选项选项选项选项选项
          </div>

          <div class="option_one industry_id" style="padding: 1.5px 5px">
            选项
          </div>
        </div>
        <div class="more_show_btn more_show_btn1"> 更多 </div>
        <div class="more_show_btn more_show_btn2"> 收起 </div>
      </div>
    </div>
  </body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(function () {
    var num = 1;
    $(".more_show_btn").click(function () {
      num++;
      console.log(num);
      if (num % 2 == 0) {$(".option_line .option_line_warp").addClass("show_menu");
        $(".more_show_btn2").show();
        $(".more_show_btn1").hide();} else {$(".option_line .option_line_warp").removeClass("show_menu");
        $(".more_show_btn1").show();
        $(".more_show_btn2").hide();}
    });
  });
</script>
正文完