Question

所以我已经被困了一段时间..

我正在尝试设置一个系统，用户有3个按钮，每个按钮调出3个div中的1个。有一个检查，当前打开的窗口的相应按钮更改其类以更改其背景颜色 - 因此很容易看到哪个选项是打开的。

然后单击另一个按钮会加载不同的内容，但会保持窗口打开 - 这可以正常工作

点击同一按钮两次关闭窗口并重新设置按钮类 - 这可以正常工作

这应该可以重复 - 但它不会......

我可以加载相应的窗口，更改其按钮类。关闭该窗口并将类重置为其原始状态，但当我再次尝试打开同一窗口时，该类不会再次更改。它不会重复这个过程..

除非你重新打开一个不同的窗口，在这种情况下它会重新开始自己的工作直到同一点......

超级困惑，无法看到这里发生的事情......

任何帮助表示赞赏!!

$(document).ready(function(){ 
    $('#findUs').click(function(){

        if($('.findUs').length){  //---.length to check if class 'findUs' exists If it dose, close dropdown and re set button-----
                    $('#findUs').attr('class','contactTitle');
                $('.infoDropdown').slideToggle("slow");
                return false;
        }
                    $('#findUs').attr('class','selectedContact');
                    $('#phoneUs').attr('class','contactTitle');
                    $('#faxUs').attr('class','contactTitle');


        $('.infoDropdown').load('global/contactOptions.php .findUs',{},function(){

            if($('.infoDropdown').is(':hidden')){
                    $('.infoDropdown').slideToggle("slow");
                }

                });

            });


//------------------------------------phone------------------------------------------
    $('#phoneUs').click(function(){

            if($('.phoneUs').length){  //---.length to check if class 'findUs' exists If it dose, close dropdown and re set button-----
                    $('#phoneUs').attr('class','contactTitle');
                $('.infoDropdown').slideToggle('slow');
                return false;
        }
                    $('#phoneUs').attr('class','selectedContact');
                    $('#findUs').attr('class','contactTitle');
                    $('#faxUs').attr('class','contactTitle');

            $('.infoDropdown').load('global/contactOptions.php .phoneUs',{},function(){

                if($('.infoDropdown').is(':hidden')){
                    $('.infoDropdown').slideToggle("slow");

                }
                });
        });
//------------------------------------Fax--------------------------------------------
    $('#faxUs').click(function(){

            if($('.faxUs').length){  //---.length to check if class 'findUs' exists If it dose, close dropdown and re set button-----
                    $('#faxUs').attr('class','contactTitle');
                $('.infoDropdown').slideToggle("slow");
                return false;
        }
                    $('#faxUs').attr('class','selectedContact');
                    $('#findUs').attr('class','contactTitle');
                    $('#phoneUs').attr('class','contactTitle');

            $('.infoDropdown').load('global/contactOptions.php .faxUs',{},function(){

                if($('.infoDropdown').is(":hidden")){
                    $('.infoDropdown').slideToggle("slow");

                }
        });
    });

});

===========================主要的html ================= ====================

 <div align="center" >
            <span class="contactTitle" id="findUs">Find Us:</span>
            <span class="contactTitle" id="phoneUs">Phone Us:</span>
            <span class="contactTitle" id="faxUs">Fax Us:</span>
        </div>

        <div class="infoDropdown">
        </div>

========================== divs从seporate页面加载================ ==============

    <div class="findUs" name="findUs">
dfgdfg
        </div>

        <div  class="phoneUs" name="phoneUs">
        test
        </div>


        <div  class="faxUs" name="faxUs">
        123
        </div>

===================================== CSS ========= ===============================

<style>
.infoDropdown{
    display:none;
    height:250px;
    margin-top:5px;
    background-color:rgba(33,252,0,1.00);
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 5px;
}
.contactTitle{  
    width:33%;
    font-weight:bold;
    text-align:center;
    border-radius:5px;
    display:inline-block;
    font-size:30px;
    background-color:green;
    margin-top:5px;
    align-items:center;

}
.selectedContact{
    width:33%;
    font-weight:bold;
    text-align:center;
    border-radius:5px;
    display:inline-block;
    font-size:30px;
    background-color:rgba(33,252,0,1.00);
    margin-top:5px;
    align-items:center; 
}
</style>

Answer 1

使用ajax加载内容一次后，此检查始终为真：if($('.findUs').length)因此，在到达代码中更改按钮的部分之前，您将返回false。类。

如何在点击时循环.attr（）更改？

1 个答案: