Of Stack

Application of folding menu and selector

  • 2021-07-16 01:20:00
  • OfStack

Today, I discovered that the original screening label can still be used in this way.

not (exprele fn): Removes the element that matches the specified expression from the set of matching elements

Use in the following demo: var $category = $(". sub-category-box > ul > li: gt (2): not (: last) "); //If the index in the list is greater than 2, except for the last 1

filter (exprobjelefn): r filters out the collection of elements that match the specified expression. This method is used to narrow the scope of matching. Separate multiple expressions with commas

$("ul > li "). filter (": contains ('Canon'),: contains ('Sony'),: contains ('3 stars') "). toggleClass (" promoted "); //Screen out the tags containing Canon, Sony and 3 stars in li tags, and set class

Find an demo that uses both methods. Suddenly I feel that jQuery is really powerful. 


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .sub-category-box{
      width: 300px;
      border: 1px solid #000;
      margin: 20px auto;
      background-color: gainsboro;
    }
    .sub-category-box ul{
      list-style: none;
      width: 100%;
      overflow: hidden;
    }
    .sub-category-box ul li{
      float: left;
      width: 95px;
      height: 35px;
      text-align: center;
      background-color: darkorange;
      box-sizing: border-box;
      line-height: 40px;
      border-radius: 5px;
      margin: 2px;
    }
    .promoted{
      background-color: red !important;
      color: white !important;
    }
    .sub-category-box .show-more{
      width: 100%;
      height: 30px;
      border: 1px solid #000;
      text-align:center;
    }
    .sub-category-box .show-more a{
      text-decoration: none;
      line-height: 30px;
    }
  </style>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script>
    $(function () {
      // The index in the list is greater than 2 Of, except in the end 1 A 
      var $category = $(".sub-category-box>ul>li:gt(2):not(:last)");
      $category.hide();

      $('.show-more').click(function () {
        $category.stop().slideToggle(300);
        // Filter out eligible selectors 
        $("ul>li").filter(":contains(' Canon '),:contains(' Sony '),:contains('3 Star ')")
             .toggleClass("promoted");
        return false;
      });
    });
  </script>
</head>
<body>
<div class="sub-category-box">
  <ul>
    <li> Canon </li>
    <li> Sony </li>
    <li>3 Star </li>
    <li> Nikon </li>
    <li> Panasonic </li>
    <li> Casio </li>
    <li> Fuji </li>
    <li> Kodak </li>
    <li> Ricoh </li>
    <li> Benzyl </li>
    <li> Panasonic </li>
    <li> Casio </li>
    <li> Fuji </li>
    <li> Kodak </li>
    <li> Haier </li>
    <li> Other brands </li>
  </ul>
<div class="show-more">
  <a href="javasript:void(0);"> Show all brands </a>
</div>
</div>
</body>
</html>
Related articles: