Функция обратного вызова Javascript .click (), по-видимому, не вызывается в аккордеоне Bootstrap? - PullRequest
Новая
       30

Функция обратного вызова Javascript .click (), по-видимому, не вызывается в аккордеоне Bootstrap?

0 голосов
/ 01 июля 2018

Я работаю над обновлением статического веб-сайта www.peek.solutions, который содержит Bootstrap accordion . Я работаю над веткой (на https://github.com/khpeek/peek-solutions/tree/accordion-chevrons), в которой я пытаюсь добавить шевроны вверх / вниз к каждому элементу списка, которые переключаются в зависимости от того, развернут ли они или нет. Я использую Material Design значки (ср. https://materialdesignicons.com/bootstrap).

В качестве первого шага решения я пытаюсь понять, могу ли я даже изменить внешний вид одной иконки. Я попытался проиллюстрировать это во фрагменте ниже, но, к сожалению, значки не отображаются, пока вы не загрузите шрифты (как это можно сделать, запустив npm install в связанном репозитории).

Но в основном, похоже, проблема в том, что функция обратного вызова $('#accordion button).click() не вызывается, поскольку, если я установлю трассировку debugger; в теле этой функции, она не остановится в моем браузере.

Есть идеи, почему эта функция не вызывается? 

$(document).ready(function(){
    $("#accordion button").click(function(){
        $("#accordion button .mdi").removeClass("mdi-chevron-up");
        $("#accordion button .mdi").removeClass("mdi-chevron-down");
    });
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> 
 
 
   <div id="accordion">

 <div class="card border-bottom-0">
      <div class="card-header" id="headingOne">
        <h5 class="mb-0">
          <button class="btn btn-light w-100 text-left" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            <i class="mdi mdi-chevron-up float-right"></i>
            <span>Pipeline Integrity Assessment and Design</span>
          </button>
        </h5>
      </div>
      <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
        <div class="card-body">
          Our services include the design and assessment of subsea pipelines for lateral and/or upheaval buckling, arctic pipelines subject to ice gouging, stamukha loadings and/or thaw settlements, and pipelines crossing active faults, as well as more routine design and assessment.
        </div>
      </div>
    </div>
  </div>
  
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

Update

Из экспериментов в консоли видно, что вызов .removeClass() на значке материала не удаляет его класс:

enter image description here

Как видите, он по-прежнему относится к классу 'mdi-chevron-up' даже после того, как я попытался его удалить. Может ли это быть причиной того, что значок не меняется?

1 Ответ

0 голосов
/ 01 июля 2018

Использование .on('click',function(){});: http://api.jquery.com/on/

$(document).ready(function(){
    $("#accordion button").on('click',function(){
        $("#accordion button .mdi").removeClass("mdi-chevron-up");
        $("#accordion button .mdi").removeClass("mdi-chevron-down");
    });
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> 
 
 
   <div id="accordion">

 <div class="card border-bottom-0">
      <div class="card-header" id="headingOne">
        <h5 class="mb-0">
          <button class="btn btn-light w-100 text-left" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            <i class="mdi mdi-chevron-up float-right"></i>
            <span>Pipeline Integrity Assessment and Design</span>
          </button>
        </h5>
      </div>
      <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
        <div class="card-body">
          Our services include the design and assessment of subsea pipelines for lateral and/or upheaval buckling, arctic pipelines subject to ice gouging, stamukha loadings and/or thaw settlements, and pipelines crossing active faults, as well as more routine design and assessment.
        </div>
      </div>
    </div>
  </div>
  
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
...