0

I'm working on updating a static website at www.peek.solutions which contains a Bootstrap accordion. I'm working on a branch (at https://github.com/khpeek/peek-solutions/tree/accordion-chevrons) in which I'm trying to add up/down-pointing chevrons to each list item which toggle according to whether it is expanded or not. I'm using Material Design icons (cf. https://materialdesignicons.com/bootstrap).

As a first stab at a solution, I'm trying to see whether I can even change the appearance of one icon. I've tried to illustrate it in a snippet below, but unfortunately, the icons don't render unless you download the fonts (as can be done by running npm install in the linked repository).

But basically, it seems that the problem is that the callback function of $('#accordion button).click() is not being called since if I set a debugger; trace in the body of that function, it does not pause in my browser.

Any ideas why this function is not getting called?

$(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

It seems from experimenting in the console that calling .removeClass() on the material icon does not remove its class:

enter image description here

As you can see, it still as the 'mdi-chevron-up' class even after I've tried to remove it. Could this be the reason the icon is not changing?

4

1 回答 1

2

Use .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>

于 2018-07-01T05:30:51.953 回答