ich Ihre Anweisungen auf etwas brauchen:Toggle und blättern zu verankern
Ich versuche, eine Seite mit ein- und divs zu erstellen. Ich brauche sie zu öffnen, wenn ich darauf klicke, wenn ich auf einen Link im Menü klicke und wenn ich auf diesen Link von einer anderen Seite klicke. Ich brauche das auch, wenn ich im Menü auf einen Anker klicke, schaltet er das korrekte div ein und scrollt zum Anker.
Ich habe versucht, etwas, das mehr oder weniger funktioniert:
Mein erstes Problem ist, dass ich zweimal auf einen Link für die Animation klicken, um zu arbeiten. Ich fand, dass das $ ("#") live ('click', function() {..} eine Lösung sein kann, aber ich weiß nicht, wie man es benutzt.
Zweites Problem, die Animationen nicht
Drittes Problem auf eine andere von einer Seite arbeiten, ich glaube, meine Code-Syntax ist schlecht und kann optimiert werden, aber ich weiß nicht, wie ...
Hier mein HTML ist:
<header id="header">
<!--Menu-->
<nav>
<ul id="menu">
<li><a href="index.html"><h2>TITRE1</h2></a>
<ul>
<li><a class="ancre-head" href="index.html#E">E</a></li>
<li><a class="ancre-head" href="index.html#F">F</a></li>
<li><a class="ancre-head" href="index.html#G">G</a></li>
<li><a class="ancre-head" href="index.html#H">H</a></li>
</ul>
</li>
<li><a href="gp.html"><h2>TITRE2</h2></a>
<ul>
<li><a class="ancre-head" href="gp.html#A">A</a></li>
<li><a class="ancre-head" href="gp.html#B">B</a>
<ul>
<li><a class="ancre" href="gp.html#B-01">B-01</a></li>
<li><a class="ancre" href="gp.html#B-02">B-02</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</header>
<div class="toggle">
<div id="A" class="toggle-head">
<div class="toggle-head-content">
<h3>A</h3>
</div>
</div>
<div class="toggle-content">
A
</div>
</div>
<div class="toggle">
<div id="B" class="toggle-head">
<div class="toggle-head-content">
<h3>B</h3>
</div>
</div>
<div class="toggle-content">
B
<div id="B-01"></div>
B-01
<div id="B-02"></div>
B-02
</div>
</div>
Und meine JS:
jQuery(document).ready(function() {
$('.toggle-content').hide();
jQuery('.toggle-head').click(function() {
$(this).siblings('.toggle-content').slideToggle('slow');
$(this).toggleClass('clicked');
});
jQuery('a.ancre-head').click(function() {
var hash = document.location.hash.replace('#', '');
$('#' + hash).each(function() {
if (hash.indexOf($(this).attr("href")) != 1 && $('#' + hash).siblings('.toggle-content').is(":hidden")) {
$('#' + hash).siblings('.toggle-content').slideDown('slow');
$('#' + hash).toggleClass('clicked');
$('html, body').animate({
scrollTop: $('#' + hash).offset().top - 20
}, 500);
} else if (hash.indexOf($(this).attr("href")) != 1 && $('#' + hash).siblings('.toggle-content').is(":visible")) {
$('html, body').animate({
scrollTop: $('#' + hash).offset().top - 20
}, 500);
}
});
return false;
});
jQuery('a.ancre').click(function() {
var hash = document.location.hash.replace('#', '');
$('#' + hash).each(function() {
if (hash.indexOf($(this).attr("href")) != 1 && $('#' + hash).parent('.toggle-content').is(":hidden")) {
$('#' + hash).parent('.toggle-content').slideDown('slow');
$('#' + hash).parents().siblings('.toggle-head').toggleClass('clicked');
$('html, body').animate({
scrollTop: $('#' + hash).offset().top - 20
}, 500);
} else if (hash.indexOf($(this).attr("href")) != 1 && $('#' + hash).parent('.toggle-content').is(":visible")) {
$('html, body').animate({
scrollTop: $('#' + hash).offset().top - 20
}, 500);
}
});
return false;
});
});
//SMOOTHSCROLL//
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
Ich werde glücklich sein, wenn Sie mir helfen können zu verstehen, wo ich falsch liege!
Danke!
Katapult
Es tut mir leid, ich schneide meine „Hallo!“ Am Anfang wollte ich nicht unhöflich sein und ich kann es nicht hinzufügen: – Katapult