javascript — расширяет различные разделы начальной загрузки с другой страницы

Question

javascript — расширяет различные разделы начальной загрузки с другой страницы

У меня есть 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, мне нужно ТОЛЬКО развернуть свертываемый div # services1.

Когда я нажимаю на второй веб-баннер в index.php, мне нужно ТОЛЬКО развернуть свертываемый div # services2.

Моя текущая функция 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, он открывает разборные элементы div на странице services.php, но тогда функция моих кнопок на services.php не работает. расширить или свернуть мои дивы. Также он открывает ВСЕ разборные элементы div, когда мне нужно открыть соответствующий разборный элемент div (т. Е. # Services1 или # services2 при нажатии на первый или второй веб-баннер на index.php)

$(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, поэтому мне нужно пошаговое объяснение или точное копирование и вставка кода, пожалуйста.

Любая помощь приветствуется.

0

anchor collapse hash javascript php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Спасибо Иисус!!! После долгих поисков на этом сайте и нескольких сайтов на тему Bootstrap div разворачивается, открывая внешнюю ссылку (другую страницу) и не находя результатов, работает следующее:

Код работает для: Ссылка на внешнюю страницу для развертывания Collapse DIV на другой странице, НО НЕ будет скрывать Collapse 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
```

Второй файл (services.php), содержащий Collapse 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>

Третий файл (services.js) содержит текущую функцию Javascript, используемую для раскрытия / свертывания кнопок внутри services.php:

//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');
});

0