How does Mini Program add and delete class names and css?

as shown in the figure, this is a list. Each item has multiple activities. The first two items are shown by default. Click the arrow to show or hide the remaining items. After thinking about it for a long time, you can"t figure out how to realize it

.

{
  "activities": [{
    "attribute": "20.0",
    "description": "20",
    "icon_color": "70bc46",
    "icon_name": "",
    "id": 901011297,
    "is_exclusive_with_food_activity": true,
    "name": "()",
    "tips": "20",
    "type": 103
  }, {
    "description": "",
    "icon_color": "f1884f",
    "icon_name": "",
    "id": 415458449,
    "name": "",
    "tips": ""
  }, {
    "description": "",
    "icon_color": "f1884f",
    "icon_name": "",
    "id": 396974601,
    "name": "",
    "tips": ""
  }]
}

clipboard.png

Mar.16,2021

add a click to expand the variable?

var dropdown=false

Click this.setData ({dropdownaccountthis.dropdown})

class= "{{dropdown?'up':'down'}}?


solved. Think of a stupid way to bind data-index='index', to each item through goods [index] to determine whether the class name is show or hide,show. If height is auto,hide, then height is the height of two lines

.
Menu