Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/89.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript JS/JQuery-展开/折叠工作时出现问题_Javascript_Html_Jquery_Twitter Bootstrap_Accordion - Fatal编程技术网

Javascript JS/JQuery-展开/折叠工作时出现问题

Javascript JS/JQuery-展开/折叠工作时出现问题,javascript,html,jquery,twitter-bootstrap,accordion,Javascript,Html,Jquery,Twitter Bootstrap,Accordion,我的HTML页面的手风琴部分无法正常工作 问题: 单击“全部展开”(变成“全部折叠”)不起作用 当我单击“+”(标题旁边)时,它会展开标题,但在另一个标题上单击“+”(当一个标题已展开时),会导致上一个标题(或全部)关闭,而只打开刚刚选定的标题。我需要选项卡保持打开状态,或仅当用户单击“-”或单击“全部展开/全部折叠”按钮时才关闭 注意:我已经包括了完整的JS,包括我认为可能存在冲突的其他函数 这是你的电话号码 请帮忙,谢谢 JS var testing = { BContactU

我的HTML页面的手风琴部分无法正常工作

问题

  • 单击“全部展开”(变成“全部折叠”)不起作用
  • 当我单击“+”(标题旁边)时,它会展开标题,但在另一个标题上单击“+”(当一个标题已展开时),会导致上一个标题(或全部)关闭,而只打开刚刚选定的标题。我需要选项卡保持打开状态,或仅当用户单击“-”或单击“全部展开/全部折叠”按钮时才关闭
  • 注意:我已经包括了完整的JS,包括我认为可能存在冲突的其他函数

    这是你的电话号码

    请帮忙,谢谢

    JS

    var testing = {
      
        BContactUs: function() {
          var businessForm = document.getElementById('businesscontactus_form');
          const companyName = document.getElementById('companyName');
          const bRName = document.getElementById('bRName');
          const cPosition = document.getElementById('cPosition');
          const bEmail = document.getElementById('bEmail');
          const bMessage = document.getElementById('bMessage');
      
          businessForm.addEventListener('submit', e => {
            e.preventDefault();
      
            checkInputs();
          });
      
          function checkInputs() {
            // trim to remove the whitespaces
            const companyNameValue = companyName.value.trim();
            const bRNameValue = bRName.value.trim();
            const cPositionValue = cPosition.value.trim();
            const bEmailValue = bEmail.value.trim();
            const bMessageValue = bMessage.value.trim();
      
            if (companyNameValue === '') {
              setErrorFor(companyName, 'Company Name must be entered');
            } else {
              setSuccessFor(companyName);
            };
      
            if (bRNameValue === '') {
              setErrorFor(bRName, 'Name cannot be blank');
            } else {
              setSuccessFor(bRName);
            };
      
            if (bEmailValue === '') {
              setErrorFor(bEmail, 'Email cannot be blank');
            } else if (!isEmail(bEmailValue)) {
              setErrorFor(bEmail, 'Not a valid email');
            } else {
              setSuccessFor(bEmail);
            };
      
            if (cPositionValue === '') {
              setErrorFor(cPosition, 'C position cannot be blank');
            } else {
              setSuccessFor(cPosition);
            };
      
            if (bMessageValue === '') {
              setErrorFor(bMessage, 'Message cannot be blank');
            } else {
              setSuccessFor(bMessage);
            };
          };
      
          function setErrorFor(input, message) {
            const formControl = input.parentElement;
            const small = formControl.querySelector('small');
            formControl.className = 'bus-form-control error';
            small.innerText = message;
          };
      
          function setSuccessFor(input) {
            const formControl = input.parentElement;
            formControl.className = 'bus-form-control success';
          };
      
          function isEmail(bEmail) {
            return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(bEmail);
          };
        },
        CustomerContactUs: function() { 
          const customer_contactus_form = document.getElementById('customercontactus_form');
          const cCUName = document.getElementById('cCUName');
          const cCUSubject = document.getElementById('cCUSubject');
          const cCUEmail = document.getElementById('cCUEmail');
          const cCUMessage = document.getElementById("cCUMessage");
          const cCUDisclaimerBox = document.getElementById('cCUDisclaimerBox');
      
          customer_contactus_form.addEventListener('submit', e => {
            e.preventDefault();
      
            checkcustomerCU_Inputs();
          });
      
          function checkcustomerCU_Inputs() {
            //trim to remove the whitespaces
            const cCUNameValue = cCUName.value.trim();
            const cCUSubjectValue = cCUSubject.value.trim();
            const cCUEmailValue = cCUEmail.value.trim();
            const cCUMessageValue = cCUMessage.value.trim();
      
            if (cCUNameValue === '') {
              setErrorForCU(cCUName, 'Please enter your name');
            } else {
              setSuccessForCU(cCUName);
            };
      
            if (cCUSubjectValue === '') {
              setErrorForCU(cCUSubject, 'Please enter a subject in order for us to help you better.');
            } else {
              setSuccessForCU(cCUSubject);
            };
      
            if (cCUEmailValue === '') {
              setErrorForCU(cCUEmail, 'Email cannot be blank');
            } else if (!isEmail(cCUEmailValue)) {
              setErrorForCU(cCUEmail, 'Not a valid email');
            } else {
              setSuccessForCU(cCUEmail);
            };
      
            if (cCUMessageValue === '') {
              setErrorForCU(cCUMessage, 'Please enter a message.');
            } else {
              setSuccessForCU(cCUMessage);
            };
      
            if (!cCUDisclaimerBox.checked) {
              setErrorForCU(cCUDisclaimerBox, 'Please check box and accept terms and conditions.');
            } else {
              setSuccessForCU(cCUDisclaimerBox);
            };
          };
      
          function setErrorForCU(input, message) {
            const formControlCU = input.parentElement;
            const small = formControlCU.querySelector('small');
            formControlCU.className = 'cus-form-control error';
            small.innerText = message;
          };
      
          function setSuccessForCU(input) {
            const formControl = input.parentElement;
            formControl.className = 'cus-form-control success';
          };
      
          function isEmailCU(cCUEmail) {
            return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(cCUEmail);
          };
        }
      };
      
      
      $(document).ready(function() {
      
        $(".cp_exin_expandAll").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');
        }
      
      });
    
    var测试={
    b联系人:函数(){
    var businessForm=document.getElementById('businesscontactus_form');
    const companyName=document.getElementById('companyName');
    const bRName=document.getElementById('bRName');
    const cPosition=document.getElementById('cPosition');
    const bEmail=document.getElementById('bEmail');
    常量bMessage=document.getElementById('bMessage');
    businessForm.addEventListener('submit',e=>{
    e、 预防默认值();
    检查输入();
    });
    函数checkInputs(){
    //修剪以删除空白
    const companyNameValue=companyName.value.trim();
    const bRNameValue=bRName.value.trim();
    const cPositionValue=cPosition.value.trim();
    const bEmailValue=bEmail.value.trim();
    常量bMessageValue=bMessage.value.trim();
    如果(公司名称值==''){
    setErrorFor(公司名称,“必须输入公司名称”);
    }否则{
    setSuccessFor(公司名称);
    };
    如果(bRNameValue==''){
    setErrorFor(bRName,‘名称不能为空’);
    }否则{
    setSuccessFor(bRName);
    };
    如果(bEmailValue==''){
    setErrorFor(bEmail,“电子邮件不能为空”);
    }如果(!isEmail(bEmailValue)){
    setErrorFor(bEmail,“非有效电子邮件”);
    }否则{
    setSuccessFor(bEmail);
    };
    如果(cPositionValue==''){
    setErrorFor(cPosition,“C位置不能为空”);
    }否则{
    设置成功(cPosition);
    };
    如果(bMessageValue==''){
    setErrorFor(bMessage,'消息不能为空');
    }否则{
    setSuccessFor(b消息);
    };
    };
    函数setErrorFor(输入、消息){
    const formControl=input.parentElement;
    constsmall=formControl.querySelector('small');
    formControl.className='bus form control error';
    small.innerText=消息;
    };
    函数setSuccessFor(输入){
    const formControl=input.parentElement;
    formControl.className='总线表单控制成功';
    };
    功能isEmail(bEmail){
    返回/^([^()\[\]\\,;:\s@“]+(\.[^()\[\]\\,;:\s@“]+)*)(“+”)(\[[0-9]{1,3}\.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]}.[1,3}.[1,3}.](a-zA 0-9]++])([a-zA 0-Z-9]++.[a-zA Z]/.2,$)/(邮件测试);
    };
    },
    CustomerContactUs:函数(){
    const customer_contactus_form=document.getElementById('customercontactus_form');
    const cCUName=document.getElementById('cCUName');
    const cCUSubject=document.getElementById('cCUSubject');
    const cCUEmail=document.getElementById('cCUEmail');
    const cCUMessage=document.getElementById(“cCUMessage”);
    const-ccudiaterbox=document.getElementById('ccudiaterbox');
    客户\u联系人\u表单。addEventListener('submit',e=>{
    e、 预防默认值();
    检查CustomerCU_输入();
    });
    功能检查CustomerCU_输入(){
    //修剪以删除空白
    const cCUNameValue=cCUName.value.trim();
    const ccusubectvalue=cCUSubject.value.trim();
    const cCUEmailValue=cCUEmail.value.trim();
    const cCUMessageValue=cCUMessage.value.trim();
    如果(CCU名称值==''){
    setErrorForCU(cCUName,‘请输入您的姓名’);
    }否则{
    setSuccessForCU(CCU名称);
    };
    如果(CCUSSubjectValue==''){
    setErrorForCU(CCUSuble,'请输入一个主题,以便我们更好地帮助您');
    }否则{
    设置CU的成功(CCU主题);
    };
    如果(cCUEmailValue==''){
    setErrorForCU(cCUEmail,“电子邮件不能为空”);
    }如果(!isEmail(cCUEmailValue)){
    setErrorForCU(cCUEmail,“非有效电子邮件”);
    }否则{
    setSuccessForCU(电子邮件);
    };
    如果(cCUMessageValue==''){
    setErrorForCU(cCUMessage,'请输入消息');
    }否则{
    setSuccessForCU(cCUMessage);
    };
    如果(!ccuerbox.checked){
    setErrorForCU(CCU免责声明框,“请勾选并接受条款和条件”);
    }否则{
    setSuccessForCU(CCURbox);
    };
    };
    函数setErrorForCU(输入,消息){
    const formControlCU=input.parentElement;
    const small=formControlCU.querySelector('small');
    formControlCU.className='cus表单控制错误';
    small.innerText=消息;
    };
    函数setSuccessForCU(输入){
    const formControl=input.parentElement;
    formControl.className='cus form control success';
    };
    功能isEmailCU(cCUEmail){
    返回/^([^()\[\]\\,;:\s@“]+(\.[^()\[\]\\,;:\s@“]+)*)(“+”)(\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]}.[1,3}.[1,3}.]测试]([a-zA 0-Z-0-9]+]2,$/);
    };
    }
    };
    $(文档).ready(函数(){
    $(.cp\u exin\u expandAll”)。在(“单击”,函数()上{
    var accordioid=$(this.attr(“accordion id”),
    纽帕内洛普
    
    <!doctype html>
    <html lang="en">
    
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Bootstrap CSS -->
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <!-- Latest compiled and minified CSS -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js " integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW " crossorigin="anonymous "></script>
        <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>
        <title>Extra Info</title>
      </head>
    
      <body>
        <header></header>
    
        <div class="extrainfo_outerbackground">
          <div class="extrainfo_banner">
            <h3 class="form-heading">Lorem Ipsum</h3>
            <a href="javascript:void(0)" class="cp_exin_expandAll 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 class="collapsed" 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">
                  <br>
                  <p>
                    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.
                  </p>
                </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, 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="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, 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="headingFour">
                <h4 class="panel-title">
                  <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
                    Collapsible Group Item #4
                  </a>
                </h4>
              </div>
              <div id="collapseFour" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingFour">
                <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="headingFive">
                <h4 class="panel-title">
                  <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="true" aria-controls="collapseFive">
                    Collapsible Group Item #5
                  </a>
                </h4>
              </div>
              <div id="collapseFive" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingFive">
                <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="headingSix">
                <h4 class="panel-title">
                  <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="true" aria-controls="collapseSix">
                    Collapsible Group Item #6
                  </a>
                </h4>
              </div>
              <div id="collapseSix" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingSix">
                <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="headingSeven">
                <h4 class="panel-title">
                  <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven" aria-expanded="true" aria-controls="collapseSeven">
                    Collapsible Group Item #7
                  </a>
                </h4>
              </div>
              <div id="collapseSeven" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingSeven">
                <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>
        </div>
      </body>
    
      <footer></footer>
    
      <script src="js/script.js"></script>
    </html>
    
    <!doctype html>
    <html lang="en">
    
      <head>
        <!--  Metadata, Stylesheets, Favicons, etc... -->
        <!-- ... -->    
      </head>
    
      <body>
        <!-- Content to create the initial DOM Tree-->
        <div class="extrainfo_outerbackground">
           <!-- ... -->
        </div>
    
        <!-- Scripts that manipulate the previously created DOM elements -->
        <!-- Double check order -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
        <!-- ... -->
        <script src="js/script.js"></script>
      </body>
    
    </html>
    
     <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">          
    
     <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
    
    $(aId + ' .panel-collapse').collapse('show');
    $(aId + ' .panel-collapse').collapse('hide');
    $(aId + ' .panel-collapse').collapse('toggle');
    
    numPanelOpen = $(accordionId + ' .collapse.show').length;