javascript - 尝试将 Bootstrap Accordion 中的数据切换限制为 .one click 事件

Question

现在我已经设置了一个 Bootstrap Accordion，因此当单击面板主体时，它会自动关闭该面板并打开下一个面板。我想限制此事件仅在每次页面加载时发生一次。 #Carriers是第一个panel-body #Storage是下一个panel-body的ID。

我尝试了 .one Jquery 表达式，但它似乎禁用了 Accordion 。我猜我需要在 JS 中执行此操作，但我希望有一种方法可以在每次页面加载时“数据切换”一次。

html Accordion :

<div class="container">
                  <div class="row" align="center">
                    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

                      <!---carrier heading--->

                      <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingCarriers" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#carriers" aria-expanded="false" aria-controls="carriers">
                          <h4 class="panel-title">
                            <a class="btn-3 btn-block btn-default" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                              Step 1: Which Carrier? <span data-toggle="tooltip" data-placement="left" title="Select the cellular/data provider this device uses." class="glyphicon glyphicon-info-sign" style="float:right"></span>

                            </a>

                          </h4>
                        </div>



                        <!---carrier inputs--->


                        <div id="carriers" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingCarrier" data-parent="#accordion" href="#carriers">
                          <div class="panel-body" data-toggle="collapse" data-target="#storage">

                            <div id="att" class="col-sm-6 col-md-2">

                                <label>
                                    <input type="radio" name="carrier" value="att"/>
                                        <div class="thumbnail input1">
                                        <img src="images/att-icon.png" alt="..." class="img-responsive">
                                        </div>
                                </label>

                            </div>

                            <div id="verizon" class="col-sm-6 col-md-2">
                                <label>
                                    <input type="radio" name="carrier" value="verizon"/>
                                        <div class="thumbnail input1">
                                        <img src="images/verizon-icon.png" alt="..." class="img-responsive">
                                        </div>
                                </label>
                            </div>
                            <div id="sprint" class="col-sm-6 col-md-2">
                                <label>
                                    <input type="radio" name="carrier" value="sprint"/>
                                        <div class="thumbnail input1">
                                        <img src="images/sprint-icon.png" alt="..." class="img-responsive">
                                        </div>
                                </label>
                            </div>
                            <div id="t-mobile" class="col-sm-6 col-md-2">
                                <label>
                                    <input type="radio" name="carrier" value="t-mobile"/>
                                        <div class="thumbnail input1">
                                        <img src="images/t-mobile-logo.png" alt="..." class="img-responsive">
                                        </div>
                                </label>
                            </div>

                            <div id="unlocked" class="col-sm-6 col-md-2">
                                <label>
                                    <input type="radio" name="carrier" value="unlocked"/>
                                        <div class="thumbnail input1">
                                        <img src="images/factoryunlocked.png" alt="..." class="img-responsive">
                                        </div>
                                </label>
                            </div>

                            <div id="other" class="col-sm-6 col-md-2">

                                    <label>
                                        <input type="radio" name="carrier" value="other"/>
                                            <div class="thumbnail input1">
                                              <img src="images/othercarriers.png" alt="...">
                                            </div>
                                    </label>        
                            </div>

                          </div>
                        </div>
                      </div>


                      <!---storage heading--->

                      <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingStorage" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#storage" aria-expanded="false" aria-controls="storage">
                          <h4 class="panel-title">
                            <a class="btn-3 btn-block btn-default" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                              Step 2: How Much Storage? <span data-toggle="tooltip" data-placement="left" title="How many GB does this device have in storage?" class="glyphicon glyphicon-info-sign" style="float:right"></span>

                            </a>
                          </h4>
                        </div>



                        <!---storage inputs--->


                        <div id="storage" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingStorage" data-parent="#accordion" href="#storage">
                          <div class="panel-body" data-toggle="collapse" data-target="#condition">

                                <div id="placeholder2" class="col-sm-12 col-md-3">

                                </div>
                                <div id="storage16" class="col-sm-12 col-md-2">

                                    <label>
                                        <input type="radio" name="storage" value="16"/>
                                            <div class="thumbnail input1">
                                              <img src="images/16gb.png" alt="...">
                                            </div>
                                    </label>        
                                </div>
                                <div id="storage64" class="col-sm-12 col-md-2">

                                    <label>
                                        <input type="radio" name="storage" value="64"/>
                                            <div class="thumbnail input1">
                                              <img src="images/64gb.png" alt="...">
                                            </div>
                                    </label>        
                                </div>
                                <div id="storage128" class="col-sm-12 col-md-2">

                                    <label>
                                        <input type="radio" name="storage" value="128"/>
                                            <div class="thumbnail input1">
                                              <img src="images/128gb.png" alt="...">
                                            </div>
                                    </label>        
                                </div>


                          </div>
                        </div>
                      </div>
                      <div id="conditionPanel" class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingCondition" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#condition" aria-expanded="false" aria-controls="condition">
                          <h4 class="panel-title">

                              <a class="btn-3 btn-block btn-default" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                              Step 3: What Is The Condition? <span data-toggle="tooltip" data-placement="left" title="Ensure that you accurately choose the condition that bests describes this device." class="glyphicon glyphicon-info-sign" style="float:right"></span>

                            </a>

                          </h4>
                        </div>




                        <!---condition inputs--->



                        <div id="condition" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingCondition" data-parent="#accordion">
                            <div class="panel-body" data-toggle="collapse" data-target="#condition">
                                <div id="condition">

                                    <div id="condition1" class="col-sm-12 col-md-3">
                                        <label>
                                            <input type="radio" name="condition" value="1"/>
                                                <div class="thumbnail input1">
                                                  <div class="btn btn-lg btn-success btn-block">Like New</h1></div>
                                                  <div class="caption">
                                                    <p>"Like New" phones look brand new, and have no signs of use. Very few phones are in this condition.</p>
                                                  </div>
                                                </div>
                                        </label>
                                    </div>

                                    <hr class="hidden-md hidden-lg">

                                    <div id="condition2" class="col-sm-12 col-md-3">
                                        <label>
                                            <input type="radio" name="condition" value="2"/>
                                                <div class="thumbnail input1">
                                                  <div class="btn btn-lg btn-primary btn-block">Good</h1></div>
                                                  <div class="caption">
                                                    <p>"Good" phones appear to be lightly used and function %100. Most phones fall in this category.</p>
                                                  </div>
                                                </div>
                                        </label>
                                    </div>

                                    <hr class="hidden-md hidden-lg">

                                    <div id="condition3" class="col-sm-12 col-md-3">
                                        <label>
                                            <input type="radio" name="condition" value="3"/>
                                                <div class="thumbnail input1">
                                                  <div class="btn btn-lg btn-warning btn-block">Cracked</h1></div>
                                                  <div class="caption">
                                                    <p>"Cracked" phones have damaged screens, but otherwise function and look like a "Good" phone.</p>
                                                  </div>
                                                </div>
                                        </label>
                                    </div>

                                    <hr class="hidden-md hidden-lg">

                                    <div id="condition4" class="col-sm-12 col-md-3">
                                        <label>
                                            <input type="radio" name="condition" value="4"/>
                                                <div class="thumbnail input1">
                                                  <div class="btn btn-lg btn-danger btn-block">Poor</h1></div>
                                                  <div class="caption">
                                                    <p>"Poor" phones may have water damage, missing buttons, heavy wear, or do not turn on.</p>
                                                  </div>
                                                </div>
                                        </label>
                                    </div>

                                </div>
                            </div>
                          </div>
                        </div>
                     </div>
                  </div>
                </div>

        </form> 

JS:

$(function()  {

    //scroll back to top in index.html

    $("#backtotop").on('click', function()  {

        $('html, body').animate({
        scrollTop: $("header").offset().top
        }, 350);

    });


    // Carrier Input

    $("#carriers").one('click', function()  {

        $('#question').hide ();
        $('html, body').animate({
        scrollTop: $("#carriers").offset().top
        }, 500);

    });
    //att
    $("#att").on('click', function()  {

        $('#att2').show(300).siblings().hide ();



    }); 
    //verizon
    $("#verizon").on('click', function()  {

        $('#verizon2').show(300).siblings().hide ();



    });
    //sprint
    $("#sprint").on('click', function()  {


        $('#sprint2').show(300).siblings().hide ();



    });
    //t-mobile
    $("#t-mobile").on('click', function()  {


        $('#t-mobile2').show(300).siblings().hide ();



    });
    //unlocked
    $("#unlocked").on('click', function()  {


        $('#unlocked2').show(300).siblings().hide ();



    });
    //other
    $("#other").on('click', function()  {


        $('#other2').show(300).siblings().hide ();



    });
    //data
    $("#data").on('click', function()  {


        $('#data2').show(300).siblings().hide ();



    });
    //wifi
    $("#wifi").on('click', function()  {


        $('#wifi2').show(300).siblings().hide ();



    });




    // Storage Input


    $("#storage").one('click', function()  {

        $('#question').hide ();
        $('html, body').animate({
        scrollTop: $("#storage").offset().top
        }, 500);


    });
    //8gb
    $("#storage8").on('click', function()  {


        $('#2storage8').show(300).siblings().hide ();



    });
    //16gb
    $("#storage16").on('click', function()  {


        $('#2storage16').show(300).siblings().hide ();



    });
    //32gb
    $("#storage32").on('click', function()  {


        $('#2storage32').show(300).siblings().hide ();



    });
    //64gb
    $("#storage64").on('click', function()  {


        $('#2storage64').show(300).siblings().hide ();


    });
    //128gb
    $("#storage128").on('click', function()  {


        $('#2storage128').show(300).siblings().hide ();


    });
    //256gb
    $("#storage256").on('click', function()  {


        $('#2storage256').show(300).siblings().hide ();


    });
    //512gb
    $("#storage512").on('click', function()  {


        $('#2storage512').show(300).siblings().hide ();


    });




    //Event handler to prevent up and down key presses from changing 'condition input'

    $('input[type="radio"]').keydown(function(e)
    {
        var arrowKeys = [37, 38, 39, 40];
        if (arrowKeys.indexOf(e.which) !== -1)
        {
        $(this).blur();
        return false;
    }
    });

    //Condition input

    $("#condition").one('click', function()  {

        $('#question').hide ();
        $('#resultsButton, .verifyResults').slideDown(425);
        $('html, body').animate({
        scrollTop: $("#questions").offset().top - 50
        }, 250);


    });

    //Like New
    $("#condition1").on('click', function()  {


        $('#condition1-2').show(300).siblings().hide ();


    });
    //Good
    $("#condition2").on('click', function()  {


        $('#condition2-2').show(300).siblings().hide ();


    });
    //Cracked
    $("#condition3").on('click', function()  {


        $('#condition3-2').show(300).siblings().hide ();


    });
    //Poor
    $("#condition4").on('click', function()  {


        $('#condition4-2').show(300).siblings().hide();


    });



    //Accordion Heading tabs

    //condition header
    $("#headingCondition").on('click', function()  {



        $('html, body').animate({
        scrollTop: $("#headingCondition").offset().top
        }, 200);


    });
    //storage header
    $("#headingStorage").on('click', function()  {



        $('html, body').animate({
        scrollTop: $("#headingStorage").offset().top
        }, 200);


    });
    //carrier header
    $("#headingCarrier").on('click', function()  {


        $('html, body').animate({
        scrollTop: $("#headingCarrier").offset().top
        }, 200);

    });


    //Hidden Thumbnails


    $(".carrierValue").on('click', function()  {



        $('#carriers').collapse('show');
        $('html, body').animate({
        scrollTop: $("#headingCarriers").offset().top
        }, 500);


    });

    $("#storageValue").on('click', function()  {



        $('#storage').collapse('show');
        $('html, body').animate({
        scrollTop: $("#headingStorage").offset().top
        }, 500);


    });

    $("#conditionValue").on('click', function()  {



        $('#condition').collapse('show');
        $('html, body').animate({
        scrollTop: $("#headingCondition").offset().top
        }, 500);


    });




    // Verification message 


    $("#verifySelection").on('click', function()  {


        $('html, body').animate({
        scrollTop: $("#logo").offset().top
        }, 500);


    });

    $(".btn-group").on('click', function()  {


        $('html, body').animate({
        scrollTop: $(this).offset().top - 300
        }, 350);


    });






});


// Form validation, returns alert "Please enter (missing value)" on submit if one of the radio buttons did not get clicked.


function validateForm() {
        var x = document.forms["selection"]["carrier"].value;
        var y = document.forms["selection"]["storage"].value;
        var z = document.forms["selection"]["condition"].value;

        if (x == null || x == "") {
        alert("Please enter a 'Carrier'");
        return false;
        }

        if (y == null || y == "") {
        alert("Please enter a 'Storage' value");
        return false;
        }
        if (z == null || z == "") {
        alert("Please enter a 'Condition' value");
        return false;
        }
    }

// Form Validation for models with no storage option

    function validateForm2() {
        var x = document.forms["selection"]["carrier"].value;
        var z = document.forms["selection"]["condition"].value;

        if (x == null || x == "") {
        alert("Please enter a 'Carrier'");
        return false;
        }
        if (z == null || z == "") {
        alert("Please enter a 'Condition' value");
        return false;
        }
    }

    //initialize tooltips
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })

Answer 1

根据您提供的信息，这也是我为您提供的一个很好的答案:

这听起来像是 Boolean flag 的工作.

其工作原理是，您有一个变量，例如 hasAccordianBeenClosed，然后首先将其设置为 false。

在关闭的代码运行之前添加检查是否为true。运行后将该变量设置为 true，它将不会再次运行。