所以,我正在尝试在用户点击按钮后显示“减号(连字符)”符号。到目前为止,我尝试过的代码不起作用。你能指出错误在哪里吗?
<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");
});
答案 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>