Как оформить загрузочную аккордеонную карту только в том случае, если она активна или расширена?

ProgramBox

Как оформить загрузочную аккордеонную карту только в том случае, если она активна или расширена?

Post author:admin
Запись опубликована:4 июня, 2023
Post category:Вопросы по программированию

#javascript #html #jquery #css #bootstrap-4

#javascript #HTML #jquery #css #bootstrap-4

Вопрос:

Я использую bootstrap 4 accordion и хочу оформить .card границу только для show collapse .

 var active = document.querySelector(".collapse.show");
active.parentNode.style.border = "1px solid #ea8523";

 .pa&e-wrapper .default-address {
  paddin&: 50px 20px;
  back&round-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
}

@media (min-width: 768px) {
  .pa&e-wrapper .default-address {
    paddin&: 50px 40px;
  }
}

.pa&e-wrapper .default-address .card {
  width: 340px;
  max-width: 100%;
  mar&in: auto;
  mar&in-bottom: 25px;
  border: 1px dashed #4e5254;
  border-radius: 10px;
  back&round-color: #f6f6f6;
}

.pa&e-wrapper .default-address .card .card-header {
  border: none;
  back&round: none;
}

.pa&e-wrapper .default-address .card .default-button {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-ali&n: center;
  -webkit-ali&n-items: center;
  -ms-flex-ali&n: center;
  ali&n-items: center;
  -webkit-box-shadow: none;
  box-shadow: none;
  line-hei&ht: 1;
  paddin&: 0;
}

.pa&e-wrapper .default-address .card .default-button im& {
  -webkit-transform: rotate(0de&);
  -ms-transform: rotate(0de&);
  -o-transform: rotate(0de&);
  transform: rotate(0de&);
  -webkit-transition: 0.3s ease-in;
  -o-transition: 0.3s ease-in;
  transition: 0.3s ease-in;
}

.pa&e-wrapper .default-address .card .default-button span {
  font-size: 12px;
  color: #4e5254;
  display: block;
  line-hei&ht: 1.5;
}

.pa&e-wrapper .default-address .card .default-button .default-name {
  font-wei&ht: 600;
  line-hei&ht: 2;
}

.pa&e-wrapper .default-address .card .default-button:not(.collapsed) im& {
  -webkit-transform: rotate(90de&);
  -ms-transform: rotate(90de&);
  -o-transform: rotate(90de&);
  transform: rotate(90de&);
}

.pa&e-wrapper .default-address .card .card-body .form-&roup {
  mar&in-bottom: 10px;
}

.pa&e-wrapper .default-address .card .card-body .form-&roup label {
  font-size: 12px;
  color: #4e5254;
}

.pa&e-wrapper .default-address .card .card-body .form-&roup .form-control {
  back&round-color: #fffbfb;
  font-size: 12px;
  hei&ht: calc(1.5em   0.75rem);
  border: 1px solid #cfcfcf;
  border-radius: 2px;
}

.pa&e-wrapper .default-address .card .card-foot {
  mar&in-bottom: 40px;
  text-ali&n: center;
}

.pa&e-wrapper .default-address .card .card-foot .btn {
  font-size: 12px;
  width: 96px;
  border-radius: 2px;
  border-color: #ea8523;
  hei&ht: 30px;
}

.pa&e-wrapper .default-address .card .card-foot .btn-primary {
  back&round-color: #ea8523;
}

.pa&e-wrapper .default-address .card .card-foot .btn-outline-primary {
  back&round-color: transparent;
  color: #ea8523;
  mar&in-ri&ht: 16px;
}

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" /&&t;
<div class="pa&e-wrapper"&&t;
  <section class="default-address"&&t;
    <div class="accordion" id="accordionAddress"&&t;
      <div class="row"&&t;
        <div class="col-md-6 col-l&-4"&&t;
          <div class="card"&&t;
            <div class="card-header" id="headin&One"&&t;
              <h2 class="mb-0"&&t;
                <button class="btn default-button collapsed text-left" type="button" data-to&&le="collapse" data-tar&et="#collapseOne" aria-expanded="true" aria-controls="collapseOne"&&t;
                        <div&&t;
                          <span class="default-name"&&t;Raju Sharma</span&&t;
                          <span&&t;64, New Ratna Bun&lows, </span&&t;
                          <span&&t;Mumbai, India.</span&&t;
                        </div&&t;
                        <im&
                          class="im&-fluid"
                          src="./assets/ima&es/icons/arrow-1x.pn&"
                        /&&t;
                      </button&&t;
              </h2&&t;
            </div&&t;

            <div id="collapseOne" class="collapse" aria-labelledby="headin&One" data-parent="#accordionAddress"&&t;
              <form&&t;
                <div class="card-body pt-0"&&t;
                  <div class="form-&roup"&&t;
                    <label&&t;NAME</label&&t;
                    <input type="text" class="form-control" placeholder="Default Text Input" /&&t;
                  </div&&t;
                  <div class="form-&roup"&&t;
                    <label&&t;ADDRESS</label&&t;
                    <input type="text" class="form-control" placeholder="Default Text Input" /&&t;
                  </div&&t;
                  <div class="form-&roup"&&t;
                    <label&&t;ZIP CODE</label&&t;
                    <input type="text" class="form-control" placeholder="Default Text Input" /&&t;
                  </div&&t;
                  <div class="form-&roup"&&t;
                    <label&&t;CITY</label&&t;
                    <input type="text" class="form-control" placeholder="Default Text Input" /&&t;
                  </div&&t;
                  <div class="form-&roup"&&t;
                    <label&&t;COUNTRY</label&&t;
                    <select class="form-control" placeholder="Default Text Input"&&t;
                      <option&&t;INDIA</option&&t;
                      <option&&t;USA</option&&t;
                      <option&&t;UK</option&&t;
                    </select&&t;
                  </div&&t;
                </div&&t;
                <div class="card-foot"&&t;
                  <button type="submit" class="btn btn-outline-primary"&&t;
                          CANCEL
                        </button&&t;
                  <button type="submit" class="btn btn-primary"&&t;
                          SAVE
                        </button&&t;
                </div&&t;
              </form&&t;
            </div&&t;
          </div&&t;
        </div&&t;
        <div class="col-md-6 col-l&-4"&&t;
          <div class="card"&&t;
            <div class="card-header" id="headin&Two"&&t;
              <h2 class="mb-0"&&t;
                <button class="btn default-button collapsed text-left" type="button" data-to&&le="collapse" data-tar&et="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"&&t;
                        <div&&t;
                          <span class="default-name"&&t;Raju Sharma</span&&t;
                          <span&&t;64, New Ratna Bun&lows, </span&&t;
                          <span&&t;Mumbai, India.</span&&t;
                        </div&&t;
                        <im&
                          class="im&-fluid"
                          src="./assets/ima&es/icons/arrow-1x.pn&"
                        /&&t;
                      </button&&t;
              </h2&&t;
            </div&&t;

            <div id="collapseTwo" class="collapse" aria-labelledby="headin&Two" data-parent="#accordionAddress"&&t;
              <form&&t;
                <div class="card-body pt-0"&&t;
                  <div class="form-&roup"&&t;
                    <label&&t;NAME</label&&t;
                    <input type="text" class="form-control" placeholder="Default Text Input" /&&t;
                  </div&&t;
                  <div class="form-&roup"&&t;
                    <label&&t;ADDRESS</label&&t;
                    <input type="text" class="form-control" placeholder="Default Text Input" /&&t;
                  </div&&t;
                  <div class="form-&roup"&&t;
                    <label&&t;ZIP CODE</label&&t;
                    <input type="text" class="form-control" placeholder="Default Text Input" /&&t;
                  </div&&t;
                  <div class="form-&roup"&&t;
                    <label&&t;CITY</label&&t;
                    <input type="text" class="form-control" placeholder="Default Text Input" /&&t;
                  </div&&t;
                  <div class="form-&roup"&&t;
                    <label&&t;COUNTRY</label&&t;
                    <select class="form-control" placeholder="Default Text Input"&&t;
                      <option&&t;INDIA</option&&t;
                      <option&&t;USA</option&&t;
                      <option&&t;UK</option&&t;
                    </select&&t;
                  </div&&t;
                </div&&t;
                <div class="card-foot"&&t;
                  <button type="submit" class="btn btn-outline-primary"&&t;
                          CANCEL
                        </button&&t;
                  <button type="submit" class="btn btn-primary"&&t;
                          SAVE
                        </button&&t;
                </div&&t;
              </form&&t;
            </div&&t;
          </div&&t;
        </div&&t;
        <div class="col-md-6 col-l&-4"&&t;
          <div class="card"&&t;
            <div class="card-header" id="headin&Three"&&t;
              <h2 class="mb-0"&&t;
                <button class="btn default-button collapsed text-left" type="button" data-to&&le="collapse" data-tar&et="#collapseThree" aria-expanded="true" aria-controls="collapseThree"&&t;
                        <div&&t;
                          <span class="default-name"&&t;Raju Sharma</span&&t;
                          <span&&t;64, New Ratna Bun&lows, </span&&t;
                          <span&&t;Mumbai, India.</span&&t;
                        </div&&t;
                        <im&
                          class="im&-fluid"
                          src="./assets/ima&es/icons/arrow-1x.pn&"
                        /&&t;
                      </button&&t;
              </h2&&t;
            </div&&t;

            <div id="collapseThree" class="collapse" aria-labelledby="headin&Three" data-parent="#accordionAddress"&&t;
              <form&&t;
                <div class="card-body pt-0"&&t;
                  <div class="form-&roup"&&t;
                    <label&&t;NAME</label&&t;
                    <input type="text" class="form-control" placeholder="Default Text Input" /&&t;
                  </div&&t;
                  <div class="form-&roup"&&t;
                    <label&&t;ADDRESS</label&&t;
                    <input type="text" class="form-control" placeholder="Default Text Input" /&&t;
                  </div&&t;
                  <div class="form-&roup"&&t;
                    <label&&t;ZIP CODE</label&&t;
                    <input type="text" class="form-control" placeholder="Default Text Input" /&&t;
                  </div&&t;
                  <div class="form-&roup"&&t;
                    <label&&t;CITY</label&&t;
                    <input type="text" class="form-control" placeholder="Default Text Input" /&&t;
                  </div&&t;
                  <div class="form-&roup"&&t;
                    <label&&t;COUNTRY</label&&t;
                    <select class="form-control" placeholder="Default Text Input"&&t;
                      <option&&t;INDIA</option&&t;
                      <option&&t;USA</option&&t;
                      <option&&t;UK</option&&t;
                    </select&&t;
                  </div&&t;
                </div&&t;
                <div class="card-foot"&&t;
                  <button type="submit" class="btn btn-outline-primary"&&t;
                          CANCEL
                        </button&&t;
                  <button type="submit" class="btn btn-primary"&&t;
                          SAVE
                        </button&&t;
                </div&&t;
              </form&&t;
            </div&&t;
          </div&&t;
        </div&&t;
        <div class="col-md-6 col-l&-4"&&t;
          <div class="card"&&t;
            <div class="card-header" id="headin&Four"&&t;
              <h2 class="mb-0"&&t;
                <button class="btn default-button text-left" type="button" data-to&&le="collapse" data-tar&et="#collapseFour" aria-expanded="true" aria-controls="collapseFour"&&t;
                        <div&&t;
                          <span class="default-name"&&t;Raju Sharma</span&&t;
                          <span&&t;64, New Ratna Bun&lows, </span&&t;
                          <span&&t;Mumbai, India.</span&&t;
                        </div&&t;
                        <im&
                          class="im&-fluid"
                          src="./assets/ima&es/icons/arrow-1x.pn&"
                        /&&t;
                      </button&&t;
              </h2&&t;
            </div&&t;

            <div id="collapseFour" class="collapse show" aria-labelledby="headin&Four" data-parent="#accordionAddress"&&t;
              <form&&t;
                <div class="card-body pt-0"&&t;
                  <div class="form-&roup"&&t;
                    <label&&t;NAME</label&&t;
                    <input type="text" class="form-control" placeholder="Default Text Input" /&&t;
                  </div&&t;
                  <div class="form-&roup"&&t;
                    <label&&t;ADDRESS</label&&t;
                    <input type="text" class="form-control" placeholder="Default Text Input" /&&t;
                  </div&&t;
                  <div class="form-&roup"&&t;
                    <label&&t;ZIP CODE</label&&t;
                    <input type="text" class="form-control" placeholder="Default Text Input" /&&t;
                  </div&&t;
                  <div class="form-&roup"&&t;
                    <label&&t;CITY</label&&t;
                    <input type="text" class="form-control" placeholder="Default Text Input" /&&t;
                  </div&&t;
                  <div class="form-&roup"&&t;
                    <label&&t;COUNTRY</label&&t;
                    <select class="form-control" placeholder="Default Text Input"&&t;
                      <option&&t;INDIA</option&&t;
                      <option&&t;USA</option&&t;
                      <option&&t;UK</option&&t;
                    </select&&t;
                  </div&&t;
                </div&&t;
                <div class="card-foot"&&t;
                  <button type="submit" class="btn btn-outline-primary"&&t;
                          CANCEL
                        </button&&t;
                  <button type="submit" class="btn btn-primary"&&t;
                          SAVE
                        </button&&t;
                </div&&t;
              </form&&t;
            </div&&t;
          </div&&t;
        </div&&t;
        <div class="col-md-6 col-l&-4"&&t;
          <div class="card"&&t;
            <div class="card-header" id="headin&Five"&&t;
              <h2 class="mb-0"&&t;
                <button class="btn default-button collapsed text-left" type="button" data-to&&le="collapse" data-tar&et="#collapseFive" aria-expanded="true" aria-controls="collapseFive"&&t;
                        <div&&t;
                          <span class="default-name"&&t;Raju Sharma</span&&t;
                          <span&&t;64, New Ratna Bun&lows, </span&&t;
                          <span&&t;Mumbai, India.</span&&t;
                        </div&&t;
                        <im&
                          class="im&-fluid"
                          src="./assets/ima&es/icons/arrow-1x.pn&"
                        /&&t;
                      </button&&t;
              </h2&&t;
            </div&&t;

            <div id="collapseFive" class="collapse" aria-labelledby="headin&Five" data-parent="#accordionAddress"&&t;
              <form&&t;
                <div class="card-body pt-0"&&t;
                  <div class="form-&roup"&&t;
                    <label&&t;NAME</label&&t;
                    <input type="text" class="form-control" placeholder="Default Text Input" /&&t;
                  </div&&t;
                  <div class="form-&roup"&&t;
                    <label&&t;ADDRESS</label&&t;
                    <input type="text" class="form-control" placeholder="Default Text Input" /&&t;
                  </div&&t;
                  <div class="form-&roup"&&t;
                    <label&&t;ZIP CODE</label&&t;
                    <input type="text" class="form-control" placeholder="Default Text Input" /&&t;
                  </div&&t;
                  <div class="form-&roup"&&t;
                    <label&&t;CITY</label&&t;
                    <input type="text" class="form-control" placeholder="Default Text Input" /&&t;
                  </div&&t;
                  <div class="form-&roup"&&t;
                    <label&&t;COUNTRY</label&&t;
                    <select class="form-control" placeholder="Default Text Input"&&t;
                      <option&&t;INDIA</option&&t;
                      <option&&t;USA</option&&t;
                      <option&&t;UK</option&&t;
                    </select&&t;
                  </div&&t;
                </div&&t;
                <div class="card-foot"&&t;
                  <button type="submit" class="btn btn-outline-primary"&&t;
                          CANCEL
                        </button&&t;
                  <button type="submit" class="btn btn-primary"&&t;
                          SAVE
                        </button&&t;
                </div&&t;
              </form&&t;
            </div&&t;
          </div&&t;
        </div&&t;
        <div class="col-md-6 col-l&-4"&&t;
          <div class="card"&&t;
            <div class="card-header" id="headin&Six"&&t;
              <h2 class="mb-0"&&t;
                <button class="btn default-button collapsed text-left" type="button" data-to&&le="collapse" data-tar&et="#collapseSix" aria-expanded="true" aria-controls="collapseSix"&&t;
                        <div&&t;
                          <span class="default-name"&&t;Raju Sharma</span&&t;
                          <span&&t;64, New Ratna Bun&lows, </span&&t;
                          <span&&t;Mumbai, India.</span&&t;
                        </div&&t;
                        <im&
                          class="im&-fluid"
                          src="./assets/ima&es/icons/arrow-1x.pn&"
                        /&&t;
                      </button&&t;
              </h2&&t;
            </div&&t;

            <div id="collapseSix" class="collapse" aria-labelledby="headin&Six" data-parent="#accordionAddress"&&t;
              <form&&t;
                <div class="card-body pt-0"&&t;
                  <div class="form-&roup"&&t;
                    <label&&t;NAME</label&&t;
                    <input type="text" class="form-control" placeholder="Default Text Input" /&&t;
                  </div&&t;
                  <div class="form-&roup"&&t;
                    <label&&t;ADDRESS</label&&t;
                    <input type="text" class="form-control" placeholder="Default Text Input" /&&t;
                  </div&&t;
                  <div class="form-&roup"&&t;
                    <label&&t;ZIP CODE</label&&t;
                    <input type="text" class="form-control" placeholder="Default Text Input" /&&t;
                  </div&&t;
                  <div class="form-&roup"&&t;
                    <label&&t;CITY</label&&t;
                    <input type="text" class="form-control" placeholder="Default Text Input" /&&t;
                  </div&&t;
                  <div class="form-&roup"&&t;
                    <label&&t;COUNTRY</label&&t;
                    <select class="form-control" placeholder="Default Text Input"&&t;
                      <option&&t;INDIA</option&&t;
                      <option&&t;USA</option&&t;
                      <option&&t;UK</option&&t;
                    </select&&t;
                  </div&&t;
                </div&&t;
                <div class="card-foot"&&t;
                  <button type="submit" class="btn btn-outline-primary"&&t;
                          CANCEL
                        </button&&t;
                  <button type="submit" class="btn btn-primary"&&t;
                          SAVE
                        </button&&t;
                </div&&t;
              </form&&t;
            </div&&t;
          </div&&t;
        </div&&t;
      </div&&t;
    </div&&t;
  </section&&t;
</div&&t;

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"&&t;</script&&t;
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"&&t;</script&&t;
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"&&t;</script&&t;

Развернуть фрагмент

Теперь я хочу оранжевую рамку .card только в том случае, если она активна или расширяется, а остальные будут иметь пунктирную рамку. Я знаю, что это возможно с помощью JavaScript, но я новичок в JavaScript, поэтому, пожалуйста, помогите мне.

Ответ №1:

Каждая карта будет добавлена к границе, когда она будет у класса show. затем мы выбираем каждую карту с помощью javascript и добавляем событие щелчка.

Css:

 .card.show {
  border: 1px solid oran&e !important;
}

Js:

 let cards = [...document.querySelectorAll(".card")];
cards.forEach(card =&&t; {
  card.addEventListener("click", function() {
    cards.forEach(c =&&t; c.classList.remove("show"));
    this.classList.add("show")
  })
});

Вопрос:

Ответ №1:

Вам также может понравиться

Есть ли возможность привязать форму к модальному окну начальной загрузки без использования вызова load?

Кипарис — Или Условие в Выпадающем списке кнопок

Как установить значение «top» по умолчанию в UIPickerView?