[英]Trying to get aria-expanded value in javascript but getting “undefined”
我試圖根據aria-expanded
是true
還是false
來更改<span>
標記的類,但是它似乎返回“ undefined”,因此它不起作用。
這是我的javascript:
$(function () {
if ($('#tester').attr('aria-expanded') === 'true') {
$("#testerTwo").toggleClass("glyphicon-eye-close glyphicon-eye-open");
}
});
我的html看起來像這樣(使用引導程序):
<div class="col-sm-6">
<a id="tester" data-toggle="collapse" href="#collapsible" aria-expanded="false">
<h3><span class="glyphicon glyphicon-star"></span> Extra <span id="testerTwo" class="glyphicon glyphicon-eye-close"></span></h3>
</a>
<div class="collapse" id="collapsible">
<div class="card card-block">
<ul>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>
</div>
</div>
</div>
您可以將其更改為單擊功能,可以使用所需的選擇器代替h3。 希望能幫助到你:
$(function () { $("h3").click(function () { $("#testerTwo").toggleClass("glyphicon-eye-close glyphicon-eye-open"); }) });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <div class="col-sm-6"> <a id="tester" data-toggle="collapse" href="#collapsible" aria-expanded="false"> <h3><span class="glyphicon glyphicon-star"></span> Extra <span id="testerTwo" class="glyphicon glyphicon-eye-close"></span></h3> </a> <div class="collapse" id="collapsible"> <div class="card card-block"> <ul> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> <li><a href="#">item 4</a></li> </ul> </div> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.