使用 JS 命名空间使 Accordion 工作

如何解决使用 JS 命名空间使 Accordion 工作

我无法将此手风琴 JS 集成到我的项目中。我已经在 J​​S 中设置了命名空间函数，效果很好。手风琴独立工作正常，但当我把它放在我的项目中时，它不能正常工作。

命名空间中的当前代码工作正常，它与 HTML 页面中需要“手风琴”才能工作的任何内容都没有相似之处或引用。我只是不知道如何将“手风琴”代码放入 JS 并使其工作。

$(document).ready(function() {
  $(".toggle-accordion").on("click",function() {
    var accordionId = $(this).attr("accordion-id"),numPanelOpen = $(accordionId + ' .collapse.in').length;

    $(this).toggleClass("active");

    if (numPanelOpen == 0) {
      openAllPanels(accordionId);
    } else {
      closeAllPanels(accordionId);
    }
  })

  openAllPanels = function(aId) {
    console.log("setAllPanelOpen");
    $(aId + ' .panel-collapse:not(".in")').collapse('show');
  }
  
  closeAllPanels = function(aId) {
    console.log("setAllPanelclose");
    $(aId + ' .panel-collapse.in').collapse('hide');
  }
});

//Namespace for current functions
var nameSpace = {
     // ** Products **
Products: function() {
    // ** Products ** - Form input error
    var businessForm = document.getElementById('businesscontactus_form');
    const companyName = document.getElementById('companyName');
    const businessRepName = document.getElementById('businessRepName');
    const companyPosition = document.getElementById('companyPosition');
    const businessEmail = document.getElementById('businessEmail');
    const businessMessage = document.getElementById('businessMessage');

    businessForm.addEventListener('submit',e => {
        e.preventDefault();

        checkInputs();
    });

    function checkInputs() {
        // trim to remove the whitespaces
        const companyNameValue = companyName.value.trim();
        const businessRepNameValue = businessRepName.value.trim();
        const companyPositionValue = companyPosition.value.trim();
        const businessEmailValue = businessEmail.value.trim();
        const businessMessageValue = businessMessage.value.trim();

        if (companyNameValue === '') {
            setErrorFor(companyName,'Company Name must be entered');
        } else {
            setSuccessFor(companyName);
        };

        if (businessRepNameValue === '') {
            setErrorFor(businessRepName,'Name cannot be blank');
        } else {
            setSuccessFor(businessRepName);
        };

        if (businessEmailValue === '') {
            setErrorFor(businessEmail,'Email cannot be blank');
        } else if (!isEmail(businessEmailValue)) {
            setErrorFor(businessEmail,'Not a valid email');
        } else {
            setSuccessFor(businessEmail);
        };

        if (companyPositionValue === '') {
            setErrorFor(companyPosition,'Company position cannot be blank');
        } else {
            setSuccessFor(companyPosition);
        };

        if (businessMessageValue === '') {
            setErrorFor(businessMessage,'Message cannot be blank');
        } else {
            setSuccessFor(businessMessage);
        };
    };

    function setErrorFor(input,message) {
        const formControl = input.parentElement;
        const small = formControl.querySelector('small');
        formControl.className = 'business-form-control error';
        small.innerText = message;
    };

    function setSuccessFor(input) {
        const formControl = input.parentElement;
        formControl.className = 'business-form-control success';
    };

    function isEmail(businessEmail) {
        return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(businessEmail);
    };
},Staff: function() {
    // ** STAFF ** 
    const customer_contactus_form = document.getElementById('customercontactus_form');
    const customerCUName = document.getElementById('customerCUName');
    const customerCUSubject = document.getElementById('customerCUSubject');
    const customerCUEmail = document.getElementById('customerCUEmail');
    const customerCUMessage = document.getElementById("customerCUMessage");
    const customerCUdisclaimerBox = document.getElementById('customerCUdisclaimerBox');

    customer_contactus_form.addEventListener('submit',e => {
        e.preventDefault();

        checkcustomerCU_Inputs();
    });

    function checkcustomerCU_Inputs() {
        //trim to remove the whitespaces
        const customerCUNameValue = customerCUName.value.trim();
        const customerCUSubjectValue = customerCUSubject.value.trim();
        const customerCUEmailValue = customerCUEmail.value.trim();
        const customerCUMessageValue = customerCUMessage.value.trim();

        if (customerCUNameValue === '') {
            setErrorForCU(customerCUName,'Please enter your name');
        } else {
            setSuccessForCU(customerCUName);
        };

        if (customerCUSubjectValue === '') {
            setErrorForCU(customerCUSubject,'Please enter a subject in order for us to help you better.');
        } else {
            setSuccessForCU(customerCUSubject);
        };

        if (customerCUEmailValue === '') {
            setErrorForCU(customerCUEmail,'Email cannot be blank');
        } else if (!isEmail(customerCUEmailValue)) {
            setErrorForCU(customerCUEmail,'Not a valid email');
        } else {
            setSuccessForCU(customerCUEmail);
        };

        if (customerCUMessageValue === '') {
            setErrorForCU(customerCUMessage,'Please enter a message.');
        } else {
            setSuccessForCU(customerCUMessage);
        };

        if (!customerCUdisclaimerBox.checked) {
            setErrorForCU(customerCUdisclaimerBox,'Please check Box and accept terms and conditions.');
        } else {
            setSuccessForCU(customerCUdisclaimerBox);
        };
};

// Accordion CSS
body {
  color: #6a6c6f;
  background-color: #f1f3f6;
  margin-top: 30px;
}

.container {
  max-width: 960px;
}

.panel-default>.panel-heading {
  color: #333;
  background-color: #fff;
  border-color: #e4e5e7;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.panel-default>.panel-heading a {
  display: block;
  padding: 10px 15px;
}

.panel-default>.panel-heading a:after {
  content: "";
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  float: right;
  transition: transform .25s linear;
  -webkit-transition: -webkit-transform .25s linear;
}

.panel-default>.panel-heading a[aria-expanded="true"] {
  background-color: #eee;
}

.panel-default>.panel-heading a[aria-expanded="true"]:after {
  content: "\2212";
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.panel-default>.panel-heading a[aria-expanded="false"]:after {
  content: "\002b";
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.accordion-option {
  width: 100%;
  float: left;
  clear: both;
  margin: 15px 0;
}

.accordion-option .title {
  font-size: 20px;
  font-weight: bold;
  float: left;
  padding: 0;
  margin: 0;
}

.accordion-option .toggle-accordion {
  float: right;
  font-size: 16px;
  color: #6a6c6f;
}

.accordion-option .toggle-accordion:before {
  content: "Expand All";
}

.accordion-option .toggle-accordion.active:before {
  content: "Collapse All";
}

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <div class="accordion-option">
    <h3 class="title">Lorem Ipsum</h3>
    <a href="javascript:void(0)" class="toggle-accordion active" accordion-id="#accordion"></a>
  </div>
  <div class="clearfix"></div>
  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingOne">
        <h4 class="panel-title">
          <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapSEOne" aria-expanded="true" aria-controls="collapSEOne">
          Collapsible Group Item #1
        </a>
        </h4>
      </div>
      <div id="collapSEOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
          Anim pariatur cliche reprehenderit,enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,sunt aliqua put a bird
          on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingTwo">
        <h4 class="panel-title">
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
        </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo">
        <div class="panel-body">
          Anim pariatur cliche reprehenderit,raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingThree">
        <h4 class="panel-title">
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
        </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingThree">
        <div class="panel-body">
          Anim pariatur cliche reprehenderit,raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
  </div>
</div>