Question

我在bootstrap中有以下列表

<i class="fa fa-plus rgh-i" data-toggle="collapse" data-target="#field-1"></i>
<i class="fa fa-plus rgh-i" data-toggle="collapse" data-target="#field-2"></i>
<i class="fa fa-plus rgh-i" data-toggle="collapse" data-target="#field-3"></i>

我使用bootstrap来切换div。

当我想隐藏我的div时，每个元素html i都有一个aria-expanded="true"我想显示我的div和aria-expanded="false"。

我想检查是否已有aria-expanded="true"的元素..以及是否有下一个隐藏前一个打开的元素。

$( "i" ).on( "click", function() {
        if(There are elements of that property aria-expanded="true")
       {
        hide previous item before you open the current one
       }else{
        //something
       }
});

我试图做一个jsdfiddle的例子，但不幸的是我们做了......我希望你已经明白我想要做什么。

基本上......在隐藏上一个项目之前我暂时显示下一个项目并且不允许打开多个元素。

提前致谢！

Answer 1

您需要使用 attribute equals selector ：

选择具有指定属性的元素，其值完全等于某个值

var areaexpandedtrue = $('[aria-expanded=true]');
if(areaexpandedtrue.length){
   areaexpandedtrue.hide();
}

Answer 2

if(this.attr('aria-expanded') === "true"){
     // hide previous item before you open the current one
}

Answer 3

您也可以先获取值，然后进行比较。

var value = $('#aria-expanded').val(); // jQuery func.

if (value =='true'){
//do some stuff
}
else{
//do some stuff
}

Answer 4

如果你想在自举中制作手风琴，那就试试吧。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Accordion</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. <a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

您可以通过引用它来编写代码。

如何检查“真或假=扩大区域？”

4 个答案: