Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/458.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 如何链接到打开的手风琴?_Javascript_Jquery_Accordion - Fatal编程技术网

Javascript 如何链接到打开的手风琴?

Javascript 如何链接到打开的手风琴?,javascript,jquery,accordion,Javascript,Jquery,Accordion,我觉得这适合我现在做的事情。 现在我想在点击blabla.com/ab.html#open时强制它打开面板,但我不熟悉JQ <div class="col-md-6 col-sm-6"> <h3>Accordion collapse with rotating icon</h3> <div class="panel-group wrap" id="accordion" role="tablist" aria-multiselectable="true"&

我觉得这适合我现在做的事情。 现在我想在点击blabla.com/ab.html#open时强制它打开面板,但我不熟悉JQ

<div class="col-md-6 col-sm-6">
<h3>Accordion collapse with rotating icon</h3>
<div class="panel-group wrap" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel">
    <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 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.
      </div>
    </div>
  </div>
  <!-- end of panel -->


</div>
<!-- end of #accordion -->

尝试此代码

<div class="col-md-6 col-sm-6">
<h3>Accordion collapse with rotating icon</h3>
<div class="panel-group wrap" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel">
    <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 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.
      </div>
    </div>
  </div>
  <!-- end of panel -->


</div>
<!-- end of #accordion -->
$(document).on('click','.click-me',function(event){
    event.preventDefault();
    $('.panel-collapse').collapse('show');
});

<div class="col-md-6 col-sm-6">
<h3>Accordion collapse with rotating icon</h3>
<div class="panel-group wrap" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel">
    <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 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.
      </div>
    </div>
  </div>
  <!-- end of panel -->


</div>
<!-- end of #accordion -->
已更新

<div class="col-md-6 col-sm-6">
<h3>Accordion collapse with rotating icon</h3>
<div class="panel-group wrap" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel">
    <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 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.
      </div>
    </div>
  </div>
  <!-- end of panel -->


</div>
<!-- end of #accordion -->
根据url将此代码添加到打开面板

<div class="col-md-6 col-sm-6">
<h3>Accordion collapse with rotating icon</h3>
<div class="panel-group wrap" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel">
    <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 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.
      </div>
    </div>
  </div>
  <!-- end of panel -->


</div>
<!-- end of #accordion -->
$(document).ready(function(){
    var url = window.location.href;
    var start = url.substr(url.indexOf("#"));
    $(start).collapse('show');
});

<div class="col-md-6 col-sm-6">
<h3>Accordion collapse with rotating icon</h3>
<div class="panel-group wrap" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel">
    <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 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.
      </div>
    </div>
  </div>
  <!-- end of panel -->


</div>
<!-- end of #accordion -->
添加此代码以更改面板上的url单击

<div class="col-md-6 col-sm-6">
<h3>Accordion collapse with rotating icon</h3>
<div class="panel-group wrap" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel">
    <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 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.
      </div>
    </div>
  </div>
  <!-- end of panel -->


</div>
<!-- end of #accordion -->
$("#accordion").on("show.bs.collapse",function(a){
    var curr=$(a.target).attr("id");
    var url = window.location.href;
    var start = window.location.hash;
    if(start.length>0){
        window.location.href = url.replace(start,"#"+curr);
    }
    else{
        window.location.href = url+"#"+curr;
    }
});

该链接出现在浏览器[link]()中,但是,它既不会自动打开面板,也不会手动打开。当然,我在G dev上有“未捕获的语法错误:意外标记”。我只想问,在您的问题中,单击一次面板就需要打开。但是您与我共享该链接,在到达此url时是否要打开面板?是的,请!我希望拥有链接的每个人都能够打开相应的面板。我收到了以下错误
(索引):1未捕获的语法错误:意外标记