javascript - 从另一个页面展开各种引导折叠 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有两个必须链接的网页横幅:

第一个网页横幅链接到 services.php#services1

第二个网页横幅链接到 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 上的网页横幅时，它会在services.php 页面上打开可折叠的div，然后打开服务上按钮的功能。 php 不展开或折叠我的 div。当我需要它打开其各自的可折叠 div 时，它还会打开所有可折叠 div(即单击 index.php 上的第一个或第二个网页横幅时的 #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. 代码适用于: 外部页面链接可在另一个页面上展开折叠 DIV，但单击时不会隐藏折叠 DIV同一页面上的其他折叠按钮:

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

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

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

3. 第一个文件 (index.php) 包含另一个页面上折叠 DIV anchor 的多个链接:

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

4. 第二个文件 (services.php) 包含折叠 DIVS: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');
   });