Question

我有2个php文件。这是第一个文件：services.php

<a href="#services1" data-collapse-group="servicesgroup" data-toggle="collapse" data-target="#services1">
<div class="button-blue">Learn More</div>
</a>

<a href="#services2" data-collapse-group="servicesgroup" data-toggle="collapse" data-target="#services2">
<div class="button-blue">Learn More</div>
</a>

<div class="solutions">
  <div id="services1" class="collapse" >
    <section> CONTENT </section>
    <section> MORE CONTENT </section>
  </div>

  <div id="services2" class="collapse" >
    <section> CONTENT </section>
    <section> MORE CONTENT </section>
  </div>
</div>

第二个文件index.php有两个必须链接的网页横幅：

第一个Web横幅链接到services.php＃services1

第二个Web横幅链接到services.php #services2

当我点击index.php中的第一个网页横幅时，我需要它只展开＃services1 collapsible div。

当我点击index.php中的第二个网页横幅时，我需要它只展开＃services2 collapsible div。

我当前的Javascript函数用于从services.php中的按钮展开/折叠：

//Bootstrap Collapse Group from within Page

$("[data-collapse-group='servicesgroup']").click(function () {
var $this = $(this);
$("[data-collapse-group='servicesgroup']:not([data-target='" +  
$this.data("target") + "'])").each(function () {
    $($(this).data("target")).removeClass("in").addClass('collapse');
});
});


//Bootstrap Scroll Up

$("div").click(function() {
$('html,body').animate({
    scrollTop: $(".solutions").offset(500).top},
    'slow');
});

半功能Javascript用于链接另一个页面：

这是我发现的唯一一个似乎是半工作的Javascript，因为当我点击index.php上的web横幅时，它会在services.php页面上打开可折叠div，但随后会在服务上打开我的按钮功能。 php不会扩展或崩溃我的div。当我需要打开它各自的可折叠div时（即当点击index.php上的第一个或第二个web横幅时，＃services1或#services2），它也会打开所有可折叠的div。

$(document).ready(function () {

$(".collapse").hide();

$(".solutions").click(function () {

    $(this).next(".collapse").slideToggle(400);
});    

if(window.location.hash && window.location.hash.replace("#", "") == "services1"){
    $('.collapse').show();  
}

}）;

我是javascript的新手所以我需要一步一步的解释或精确的复制和粘贴代码。

感谢任何帮助。

Answer 1

谢谢你！经过多次搜索本网站和多个站点上的Bootstrap崩溃div从外部链接（另一页）打开并找不到结果后，工作：

代码适用于：外部页面链接可在另一页面上展开折叠DIV但在点击时不会隐藏折叠DIV 同一页面上的其他折叠按钮：
```
$(document).ready(function() {
   $(window.location.hash).show();
});
```
代码适用于：外部页面链接可在其他页面上展开折叠DIV并在单击其他页面时隐藏折叠DIV 折叠按钮。其他按钮的折叠功能正常工作：
```
$(document).ready(function() {
   $(window.location.hash).addClass('collapse in');
});
```

第一个文件（index.php）包含多个链接到另一个页面上的折叠DIV锚点：

LINKED IMAGE: services.php#services1
LINKED IMAGE: services.php#services2
LINKED IMAGE: services.php#services3

包含Collapse DIVS：services.php

的第二个文件（services.php）

<a href="#services1" data-collapse-group="servicesgroup" data-  
toggle="collapse" data-target="#services1">
<div class="button-blue">Learn More</div>
</a>

<a href="#services2" data-collapse-group="servicesgroup" data-
toggle="collapse" data-target="#services2">
<div class="button-blue">Learn More</div>
</a>

<a href="#services3" data-collapse-group="servicesgroup" data-
toggle="collapse" data-target="#services2">
<div class="button-blue">Learn More</div>
</a>

<div class="solutions">
   <div id="services1" class="collapse" >
     <section> CONTENT </section>
     <section> MORE CONTENT </section>
   </div>

   <div id="services2" class="collapse" >
    <section> CONTENT </section>
    <section> MORE CONTENT </section>
   </div>

   <div id="services3" class="collapse" >
    <section> CONTENT </section>
    <section> MORE CONTENT </section>
   </div>
</div>

第三个文件（services.js）包含用于从services.php中的按钮展开/折叠的当前Javascript函数：

//Expand Collapse DIV from External Link and Internal Collapse buttons work

$(document).ready(function() {
  $(window.location.hash).addClass('collapse in');
});

//Collapse DIV Group from within Page

$("[data-collapse-group='servicesgroup']").click(function () {
var $this = $(this);
$("[data-collapse-group='servicesgroup']:not([data-target='" +  
$this.data("target") + "'])").each(function () {
$($(this).data("target")).removeClass("in").addClass('collapse');
  });
});


//Scroll Up DIV when clicking on Collapse Button within page

$("div").click(function() {
$('html,body').animate({
  scrollTop: $(".solutions").offset(500).top},
  'slow');
});

从另一个页面展开各种bootstrap collapse div

1 个答案: