Question

我在同一页面上有一系列卡片。下面的示例是下面的例子，我在这个例子中只放了1张卡（但还有更多）。

我没有使用jquery＆＃39;最接近＆＃39;或者兄弟姐妹＆＃39;或类似的事情做以下操作：当用户点击卡片时，它会折叠并且javascript会启动以显示内容。我需要在那一刻更换＆＃34; plus图标＆＃34;通过＆＃34;减号图标＆＃34;。（仅限于此特定卡片，因此不得在任何时候使用包含卡片编号的ID或类别，以下示例中为

;

Jsfiddle Demo

Javascript应该定位图标，但是当我点击

时它不会改变它

如果您在制作内容时遇到问题，请不要担心，这不是问题的重点。我只是想知道如何定位图标并转换为glyphicon minus。

HTML

   <div id="operation-zone">
    <ul class="cards-list">

    <li class="card 354" data-opcode="CATIMINI26">

        <div class="card-content" id="accordion_354"> 

      <a class="card-detail-opener" id="BtnHomeOperationExpand_53313" role="button" data-toggle="collapse" data-parent="#accordion_354" href="#collapseOne_354" aria-expanded="false" aria-controls="collapseOne_354">
        <i class="glyphicon glyphicon-plus detail-icon_354"></i>
      </a>

      <div class="card-image card-lazy-preloader" id="accordion2">              
        <a href="/campaigns/xxxxx">
                    </a><figure><a href="/campaigns/xxxxxx">            
                        <!-- responsive image -->
                        <img style="opacity: 1; display: block;" id="HPImageBanner_354" src="http://vp-eu.scene7.com/is/image/vpeu/0/00_54093_FR_brandvisualnbrandvisualfr">  
                    </figure>

            </div>



        </div> 

      <div id="collapseOne_354" class="smux details details_354 panel-collapse collapse left-aligned" role="tabpanel" aria-labelledby="headingOne" style="height: auto;">
          <div id="DivHomeOperationDates" class="dates">
              Jusqu'au <span class="brand-color">mercredi 06/04 6h</span>
          </div>

          <div id="DivHomeOperationDescription_52850" class="description">
              operation in venicesqqsqssqsqsqsqsqsqss qui ravira les petits et les grands ! Retrouvez Les Schtroumpfs, Les Rebelles de la Foret, Hotel Transylvanie et bien d'autres encore... 
          </div>

          <div class="card-info-actions">
            <a class="btn btn-lg btn-primary" href="/campaigns/operation-in-venicesqqsqssqsqsqsqsqsqss">go Now &gt;</a>
          </div>
      </div>

      <!-- end of campaign card details on 1-column view-->


    </li>

            </ul>


    </div>

的Javascript

$('#collapseOne_354').on('shown.bs.collapse', function () {
  $(".glyphicon").removeClass("glyphicon-plus").addClass("glyphicon-minus");
});
$('#collapseOne_354').on('hidden.bs.collapse', function () {
  $(".glyphicon").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});

CSS

.cards-list {
    list-style: none;
    display: block;
    height: auto;
}
.card {
    text-align: left;
    width: 100%;
    border-bottom: 1px solid black;     
    position: relative;
}

.card-content {
    background: #fff;
    position: relative;
}
.card-image {
    vertical-align: top;
    img {
        width: 100%;
        height: 100%;
        position: absolute;
      top: 0;
      left: 0;
      color: green; 
    }
  position: relative;
  line-height: 0;
  overflow: hidden;
    padding-bottom: 33.88%;
}
.container .jumbotron {
  padding-left: 0px;
  padding-right: 0px;
}

.card-detail-opener {  
        color: green;
      font-size: 16px;
      text-align: center;
      padding-left: 1px;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      line-height: 27px;
      background: grey;
        position: absolute;
      z-index: 2;
      opacity: .75;
      filter: alpha(opacity=75);
      bottom: 60%;
      right: 30%;
        &:hover { background: #7E7E7E; }
        &:focus { background: #7E7E7E; }
    }

}

.card-detail-opener:link {
    color: green;

}
.glyphicon.glyphicon-remove {
    color: #333;
    &:hover { color: green; }
    &:focus {   color: green; }
}
.glyphicon.glyphicon-plus { 
     top:1px;
        color: #333;
        &:hover { color: #ffffff; }
        &:focus {   color: #ffffff; }

}
.glyphicon.glyphicon-minus {    
        top:2px;
        padding-right: 2px;//tweak to center
        color: #333;
        &:hover { color: #ffffff; }
        &:focus {   color: #ffffff; }

}


// Content of the card details in the 1-column view
.card .details {

        padding-top: 10px;
        background-color: rgba(255,255,255,1);

}
.details {
    padding-left: 1em;
}
.details .dates { 
    padding-top: 10px; 
    font-size: .8em;
  line-height: 1.6em;
  color: #464650;
  margin-right: 1em;
  background-size: 90px auto !important;
  background-repeat: no-repeat !important;
  background-position-x: right !important;
  background-position-y: 0px !important;    
  margin-bottom: 8px; 
}
.details .baseline {
    color: #888;
    font-size: 0.75em;
    line-height: 0.4em;
}
.details .description {
    font-size: .65em;
    color: #464650; 
    line-height: 1.1em;
    overflow: hidden;

}
// End of content of the card details in the 1-column view
.card-info-actions {
    float: right;
    padding: 0 5px 2px 0;
    clear: both;
}
//smaller buttons for cards
.card-info-actions .btn-primary {
    font-size: 15px;
}

.card-short-info a.dateSales {
  color: #464650;
}
.info-overlay {
  display:none;
  z-index:999;
  position:absolute;
  height:100%;
  width: 100%;
  background-color: rgba(255,255,255,.9);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF)\9";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF);
  transition: all .4s ease-in-out;
  border-bottom: 4px solid green;
}

.close-overlay {
  float:right;
  padding:5px;
}

.info-overlay a {
    display: block;
    line-height: normal;
    text-decoration: none;
    cursor: pointer;
}

Answer 1

绑定collapseOne_354

时，ID错误collapseOne

EDIT 我会用

到达glyphicon

var list = $('.cards-list')
$('li', list).click(function(e){ 
  var card=$(this);
  $(this).find(".glyphicon").toggleClass("glyphicon-minus").toggleClass("glyphicon-plus");
});

目标最近的图标将其更改为另一个图标

1 个答案: