如何检查“真假=扩展区域”？答案

【问题标题】：how to check if "true or false = expanded area?"如何检查“真假=扩展区域”？
【发布时间】：2015-12-23 09:18:46
【问题描述】：

我在引导程序中有以下列表

<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>

我使用引导程序来切换 div。

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

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

$( "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 但不幸的是我们做到了......我希望你已经理解我想要做什么。

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

提前致谢！

【问题讨论】：

你在做手风琴吗？

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

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

【讨论】：

请提供更多细节。

【解决方案2】：

你需要使用attribute equals selector：

选择具有指定属性且值恰好等于某个值的元素

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

【讨论】：

【解决方案3】：

也可以先取值，再比较。

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

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

【讨论】：

【解决方案4】：

如果你想在 bootstrap 中制作手风琴，那么试试这个。

    
    <!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>

你可以通过引用这个来编写你的代码。

【讨论】：

【解决方案5】：

<i class="test fa fa-plus rgh-i" data-toggle="collapse" aria-expanded="false" data-target="#field-1"></i>

如果 aria-expanded 为真或假，此 jquery 调用返回布尔值，如果您使用 jquery onclick，则可以将第一个参数传递为 this。

$('.test').attr('aria-expanded');

    $( ".test" ).click(function() {
    if ($(this).attr('aria-expanded')) {
        //your code here
    } else {
        //your code here
    }
});

【讨论】：