Bootstrap手风琴,使用jQuery在折叠时将“+”改为“ - ”

时间:2017-05-03 06:14:06

标签: jquery html twitter-bootstrap

所以,我正在尝试在用户点击按钮后显示“减号(连字符)”符号。到目前为止,我尝试过的代码不起作用。你能指出错误在哪里吗?

<a role="button" data-toggle="collapse" data-parent="#accordion" 
href="#collapse<?php echo $i; ?>" aria-expanded="false" aria-
controls="collapse<?php echo $i; ?>" class="collapsed text15">

   <i class="more-less glyphicon glyphicon-plus"></i>
    Slot Name

</a>

我尝试使用此代码,但它无效。

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

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

3 个答案:

答案 0 :(得分:0)

您可以添加 AuthenticationResult result = null; try { string userObjectID = (User.FindFirst("http://schemas.microsoft.com/identity/claims/objectidentifier"))?.Value; AuthenticationContext authContext = new AuthenticationContext(Startup.Authority, new NaiveSessionCache(userObjectID, HttpContext.Session)); ClientCredential credential = new ClientCredential(Startup.ClientId, Startup.ClientSecret); result = await authContext.AcquireTokenSilentAsync("https://graph.windows.net", credential, new UserIdentifier(userObjectID, UserIdentifierType.UniqueId)); var userData = new { accountEnabled = true, displayName = "nan yu", mailNickname = "nanyu", passwordProfile = new { password = "xxxxxx", forceChangePasswordNextLogin = false }, userPrincipalName = "nanyuTest54@testbasic1.onmicrosoft.com" }; // Forms encode todo item, to POST to the Azure AD graph api. HttpContent content = new StringContent(JsonConvert.SerializeObject(userData), System.Text.Encoding.UTF8, "application/json"); // // Add the azure ad user. // HttpClient client = new HttpClient(); HttpRequestMessage request = new HttpRequestMessage(HttpMethod.Post, "https://graph.windows.net/myorganization/users?api-version=1.6"); request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", result.AccessToken); request.Content = content; HttpResponseMessage response = await client.SendAsync(request); // // Return user in the view. // if (response.IsSuccessStatusCode) { return RedirectToAction("Index"); } else { // // If the call failed with access denied, then drop the current access token from the cache, // and show the user an error indicating they might need to sign-in again. // if (response.StatusCode == System.Net.HttpStatusCode.Unauthorized) { } } } catch (Exception ee) { // // The user needs to re-authorize. Show them a message to that effect. // } 并使用以下脚本代替此

class="showhide"

答案 1 :(得分:0)

你也可以用CSS

来做到这一点
.panel-heading .accordion-toggle:after {
font-family: "Glyphicons Halflings";
content: "\e113";
float: right;
}

.panel-heading .accordion-toggle.collapsed:after {
  content: "\e114";
}

body {
  margin: 0;
}

a {
  cursor: pointer;
}

.panel-default>.panel-heading {
  background-color: rgba(19, 162, 176, 0.1);
  border-left: 17px solid #13a2b0;
}

.sample-accordion {
  list-style: none;
  margin-bottom: 0;
  padding: 0;
}

.panel-title {
  color: black;
  font-family: "Kepler Std";
  font-size: 36px;
  font-weight: 700;
  text-transform: uppercase;
}

.panel-body {
  border-left: 4px solid #13a2b0;
  padding: 28px 28px 0 28px;
}

.panel-group .panel+.panel {
  margin-top: 28px;
}

.sample-accordion-item {
  background-color: rgba(0, 0, 0, 0.05);
  margin-bottom: 15px;
}

.sample-accordion-item:last-child {
  margin-bottom: 0 !important;
}

.accordion-image {
  height: 100px;
}

.accordion-item {
  display: inline-block;
}

.accordion-item-link {
  color: #000;
  font-family: "Kepler Std";
  font-size: 32px;
  margin-left: 15px;
}

.accordion-item-link:hover {
  color: #13a2b0;
}

.accordion-item a {
  text-decoration: none;
}

.panel-title a {
  text-decoration: none;
}

.panel-heading .accordion-toggle:after {
  font-family: "Glyphicons Halflings";
  content: "\e113";
  float: right;
}

.panel-heading .accordion-toggle.collapsed:after {
  content: "\e114";
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse1">
  List
          </a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">
          <ul class="sample-accordion">
            <li class="sample-accordion-item">
              <div class="accordion-item"><a class="accordion-item-link">Item 1</a></div>
            </li>
            <li class="sample-accordion-item">
              <div class="accordion-item"><a class="accordion-item-link">Item 2</a></div>
            </li>
            <li class="sample-accordion-item">
              <div class="accordion-item"><a class="accordion-item-link">Item 3</a></div>
            </li>
            <li class="sample-accordion-item">
              <div class="accordion-item"><a class="accordion-item-link">Item 4</a></div>
            </li>
            <li class="sample-accordion-item">
              <div class="accordion-item"><a class="accordion-item-link">Item 5</a></div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

答案 2 :(得分:0)

$(".glyphicon").removeClass选择所有图标,这可能不是您想要的。使用$(e.target).prev().find("i")代替图标。检查这个工作演示:

$(function() {
  $(".collapse").on('show.bs.collapse', function(e) {  
    if ($(this).is(e.target)) {
      snippet.log("show "+this.id)
    }
    $(e.target).prev().find("i").removeClass("glyphicon-plus").addClass("glyphicon-minus");
  })
  $(".collapse").on('hidden.bs.collapse', function(e) { 
    if ($(this).is(e.target)) {
      snippet.log("hide "+this.id)
    }
    $(e.target).prev().find("i").removeClass("glyphicon-minus").addClass("glyphicon-plus");
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><i class="more-less glyphicon glyphicon-plus"></i>
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Collapsible Group Item #2
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"><i class="more-less glyphicon glyphicon-plus"></i>
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Collapsible Group Item #3
      </div>
    </div>
  </div>
</div>