从另一个页面展开各种引导折叠 div

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 可折叠 div。

当我点击 index.php 中的第二个网页横幅时，我只需要展开 #services2 可折叠 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，当我需要它打开其各自的可折叠 div 时（即单击 index.php 上的第一个或第二个 Web 横幅时 #services1 或 #services2）

$(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 的主题后，没有找到以下结果：

1. 代码适用于： 用于在另一个页面上展开 Collapse DIV 的外部页面链接但在单击时不会隐藏 Collapse DIV 同一页面上的其他折叠按钮：

   $(document).ready(function() {
      $(window.location.hash).show();
   });
   

2. 代码适用于： 用于在另一个页面上展开 Collapse DIV 的外部页面链接，并在单击其他页面时隐藏 Collapse DIV 折叠按钮。其他按钮的折叠功能正常工作：

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

3. 第一个文件 (index.php) 包含多个链接以在另一个页面上折叠 DIV 锚：

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

4. 包含折叠 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>
   

5. 第三个文件 (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');
   });