Question

我正在尝试使用Bootstrap的折叠功能在我正在处理的页面上创建一个功能正常的“显示更多”按钮。该按钮应显示更多/隐藏名片说明的正文。

问题在于页面内容是动态生成的，我不确定在这种情况下如何使用折叠。我了解我需要将按钮链接到我希望折叠和显示的内容。

我尝试遵循有关折叠元素的Bootstrap文档。不幸的是，如上所述，这没有产生预期的结果（我想这是由于我的内容的动态创建）。

HTML：

<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial- 
  scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="carsStyling.css">

  <title>Weyland's Cars</title>
</head>
<body>
  <div class="row">
    <div class="col-md-4">
      <h1>Hello World</h1>
      <p>Welcome to Weyland's Cars</p>
    </div>
  </div>
  <div id="card-space" class="row">

  </div>

  <script src="cars.js"></script>
</body>
</html>

JavaScript：

let cars = [];

function carCreator(make, model, colour, image, registrationNumber, price) {
  this.make = make;
  this.model = model;
  this.colour = colour;
  this.image = image;
  this.registrationNumber = registrationNumber;
  this.price = price;
  cars.push(this);
}

let volkswagenPolo = new carCreator("Volkswagen", "Polo", "White", "https://source.unsplash.com/random/1920x1080", "ND 123 456", "R125 000");
let chevroletSpark = new carCreator("Chevrolet", "Spark", "Black", "https://source.unsplash.com/random/1920x1080", "ND 654 321", "R112 000");
let renaultClio = new carCreator("Renault", "Clio", "Red", "https://source.unsplash.com/random/1920x1080", "ND 456 789", "R225 000");
let kiaPicanto = new carCreator("Kia", "Picanto", "Grey", "https://source.unsplash.com/random/1920x1080", "ND 987 6546", "R185 000");
let fordFiesta = new carCreator("Ford", "Fiesta", "Orange", "https://source.unsplash.com/random/1920x1080", "ND 123 987", "R295 000");

cars.forEach(car => {

  container = document.createElement("div");
  container.className = "col-md-3";

  card = document.createElement("div");
  card.className = "card";

  image = document.createElement("img")
  image.className = "card-img-top"
  image.src = car.image;

  info = document.createElement("div");
  info.className = "card-body";

  title = document.createElement("h4")
  title.className = "card-title"
  title.innerHTML = car.make;

  details = document.createElement("p")
  details.className = "body-text"
  details.innerHTML = "Model: " + car.model + "</br>" +
                      "Colour: " + car.colour + "</br>" +
                      "Registration: " + car.registrationNumber + "</br>" +
                      "Price: " + car.price;
  details.id = "body-text-area"

  collapse = document.createElement("a")
  collapse.className = "btn btn-primary"
  collapse.innerHTML = "Show More"

  container.appendChild(card);
  card.appendChild(image);
  card.appendChild(info);
  info.appendChild(title);
  info.appendChild(details);
  info.appendChild(collapse)
  document.getElementById('card-space').appendChild(container);
})

Answer 1

您在代码中忘记了很多东西：

1：每个“内容”都有唯一的标识符

2：将对折叠有用的参考有效：
.... a）details.className ='正文折叠';
... b）crash.dataset.toggle ='collapse'
............ falling.setAttribute（'role'，'button'）
............ falling.setAttribute（'aria-expanded'，'false'）
............ falling.setAttribute（'aria-controls'，'body-text-area'）

3：在页面中添加3个JS库！
...-jquery-3.2.1.slim.min.js ...-popper.min.js ...-bootstrap.min.js

否则，对不起，但是我似乎无法以您的编码方式找到任何逻辑，所以我以自己的方式做到了，希望对您有所帮助

class Cars {
  constructor(ref) {
    this.list = [];  // do you really need a list ?
    this.hmi_ref = ref;

    // Bootstap : container type
    this.BS = {}
    this.BS.container = document.createElement('div');
    this.BS.card      = document.createElement('div');
    this.BS.image     = document.createElement('img');
    this.BS.info      = document.createElement('div');
    this.BS.title     = document.createElement('h4');
    this.BS.details   = document.createElement('p');
    this.BS.collapse  = document.createElement('a');

    this.BS.info.appendChild( this.BS.title )
    this.BS.info.appendChild( this.BS.details )
    this.BS.info.appendChild( this.BS.collapse );
    this.BS.card.appendChild( this.BS.image );
    this.BS.card.appendChild( this.BS.info );
    this.BS.container.appendChild( this.BS.card );

    this.BS.container.className = 'col-md-3';
    this.BS.card.className      = 'card';
    this.BS.image.className     = 'card-img-top';
    this.BS.title.className     = 'card-title';
    this.BS.details.className   = 'body-text collapse';
    this.BS.collapse.className  = 'btn btn-primary';

    this.BS.collapse.dataset.toggle ='collapse'
    this.BS.collapse.textContent    = 'Show More'

    this.BS.collapse.setAttribute('role', 'button');
    this.BS.collapse.setAttribute('aria-expanded', 'false');
    this.BS.collapse.setAttribute('aria-controls', 'body-text-area');


  }
  add ( make, model, colour, image, registrationNumber, price)
  {
    this.list.push( {make, model, colour, image, registrationNumber, price } ) // for list, but why ?

    let carID = 'car_' + this.list.length;

    this.BS.image.src         = image;
    this.BS.title.textContent = make;
    this.BS.details.id        = carID;
    this.BS.details.innerHTML = `Model:${model}</br>Colour:${colour}</br>Registration:${registrationNumber}</br>Price:${price}`;
    this.BS.collapse.href     = `#${carID}`;

    let newNode = this.BS.container.cloneNode(true)

    this.hmi_ref.appendChild( newNode );

    // return carID; ?// ??
  }
}

const CardSpace = document.getElementById('card-space');

let myCars = new Cars( CardSpace );

myCars.add('Volkswagen', 'Polo', 'White', 'https://source.unsplash.com/random/1920x1080', 'ND 123 456', 'R125 000');
myCars.add('Chevrolet', 'Spark', 'Black', 'https://source.unsplash.com/random/1920x1080', 'ND 654 321', 'R112 000');
myCars.add('Renault', 'Clio', 'Red', 'https://source.unsplash.com/random/1920x1080', 'ND 456 789', 'R225 000');
myCars.add('Kia', 'Picanto', 'Grey', 'https://source.unsplash.com/random/1920x1080', 'ND 987 6546', 'R185 000');
myCars.add('Ford', 'Fiesta', 'Orange', 'https://source.unsplash.com/random/1920x1080', 'ND 123 987', 'R295 000');


// console.log( myCars.list )

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-md-4">
    <h1>Hello World</h1>
    <p>Welcome to Weyland's Cars</p>
  </div>
</div>
<div id="card-space" class="row"> </div>

使用JavaScript创建动态Bootstrap切换

1 个答案: