Auslösen eines Klickereignisses nach dem Klicken auf den Anker-Link

Question

Ich habe einen Anker-Link im Akkordeon-Untermenü. Ich habe einen anderen Anker-Link außerhalb dieses Akkordeons, der mit dem inneren Anker-Tag verknüpft ist. Wenn ich auf den äußeren Anker-Link klicke, möchte ich, dass die Seite nach unten zu Akkordeon scrollt und auch das Akkordeon-Menü öffnet, in dem der Anker platziert wurde.

Ich habe die folgende html innerhalb des Körpers

<a href="#move"><p>Hello</p></a> 
 

 
<div> 
 
    <div id="one"> 
 
    One 
 
    </div> 
 
    <div> 
 
    some text 
 
    <div> 
 

 
    <div id="two"> 
 
    Two 
 
    </div> 
 
    <div> 
 
    some text 
 
    <div> 
 
    <a id="move"></a> 
 
</div>

Wenn ich auf Hallo möchte ich die Seite Tag Anker mit id Bewegung nach unten scrollen und danach möchte ich ein auslösen Klicken Sie auf Div mit ID zwei. Ich bin neu in Javascript und jquery. Ich möchte wissen, ob es möglich ist.

Danke.

Answer 1

Das ist durchaus möglich. Es gibt eine kleine Komplexität beim Auslösen des Klickereignisses, je nachdem, was Sie möchten, aber selbst das ist nicht schlecht.

Mit jQuery und die jQuery scrollTo plugin (siehe hier - Sie können es über ein Content-Delivery-Netzwerk laden, so dass Sie brauchen noch nicht einmal eine lokale Kopie Host), die beide installiert, können Sie so etwas wie dies wollen werden:

$('a[href="#move"]').click(function() { 
    $(window).scrollTo('#move', { 
    onAfter: function() { 
     $('#two').click(); 
    } 
    }) 
}); 

Zeile für Zeile: 1. Richten Sie das Anker-Tag mit dem href = "# move" aus und hängen Sie eine Funktion an, die das click-Ereignis behandelt.

2. Wenn diese Funktion ausgelöst wird, löst sie das scrollTo-Plugin aus. Wir geben dem scrollTo-Plugin die ID, zu der wir scrollen wollen, und dann ein Objekt {}, das die Einstellungen enthält, die wir an das scrollTo-Plugin übergeben.

3. Die einzige Einstellung, die wir hier unbedingt benötigen, ist der onAfter-Callback, der eine Funktion ausführt, wenn die Animation beendet ist.

4. Während dieses Rückrufs das Click-Ereignis aufrufen. Eine Erläuterung des Unterschieds zwischen .click() und .trigger ("click") finden Sie in here. Kurz gesagt, wenn Sie nur den Event-Handler auslösen möchten, können Sie die Methode .trigger() verwenden, und ich glaube, klicken Sie auf() funktioniert ziemlich genau so. Wenn Sie also nicht nur einen Klick-Handler auslösen, sondern tatsächlich zu einem Link navigieren möchten, müssen Sie dies anders machen.

Answer 2

Hier Lösung:

function scrollToAnchor(aid){ 
    var aTag = $("a[id='"+ aid +"']"); 
    $('html,body').animate({scrollTop: aTag.offset().top},'slow'); 
} 

scrollToAnchor('move'); 

Referenz ansehen hier:

• http://api.jquery.com/offset/
• http://api.jquery.com/animate/

function scrollToAnchor(aid){ 
 
    var aTag = $("a[id='"+ aid +"']"); 
 
    $('html,body').animate({scrollTop: aTag.offset().top},500); 
 
} 
 
$('#click').click(function(){ 
 
    scrollToAnchor('move'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" id="click"><p>Hello</p></a> 
 

 
<div> 
 
    <div id="one"> 
 
    One 
 
    </div> 
 
    <div> 
 
    some text 
 
    <div> 
 

 
    <div id="two"> 
 
    Two 
 
    </div> 
 
    <div> 
 
    some text 
 
    <div> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <a id="move">move</a> 
 
</div>

Answer 3

Sie können einfach mit <a href=#id"></a> navigieren, viel besser als JS auf meiner Meinung nach verwenden :)

Zum Beispiel:

<h1 id="up"> Up </h1> 
 
<a href="#one"><p>one</p></a> 
 
<a href="#two"><p>two</p></a> 
 

 
<div> 
 
    <div id="one"> 
 
    <h1>One</h1> 
 
    Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí". Estos textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de "Lorem Ipsum" va a dar por resultado muchos sitios web que usan este texto si se encuentran en estado de desarrollo. Muchas versiones han evolucionado a través de los años, algunas veces por accidente, otras veces a propósito (por ejemplo insertándole humor y cosas por el estilo).Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí". Estos textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de "Lorem Ipsum" va a dar por resultado muchos sitios web que usan este texto si se encuentran en estado de desarrollo. Muchas versiones han evolucionado a través de los años, algunas veces por accidente, otras veces a propósito (por ejemplo insertándole humor y cosas por el estilo). 
 
    </div> 
 

 
    <div id="two"> 
 
    <h1>two</h1> 
 
    Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí". Estos textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de "Lorem Ipsum" va a dar por resultado muchos sitios web que usan este texto si se encuentran en estado de desarrollo. Muchas versiones han evolucionado a través de los años, algunas veces por accidente, otras veces a propósito (por ejemplo insertándole humor y cosas por el estilo).Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí". Estos textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de "Lorem Ipsum" va a dar por resultado muchos sitios web que usan este texto si se encuentran en estado de desarrollo. Muchas versiones han evolucionado a través de los años, algunas veces por accidente, otras veces a propósito (por ejemplo insertándole humor y cosas por el estilo).  </div> 
 

 
    <a href="#up"><h1>GO UP</h1></a> 
 
</div>

Answer 4

Das ist, was genau möglich mit jQuery.

$('a').on('click', function(e){ 
 
    e.preventDefault(); 
 
    
 
    var target = $(this).attr('href'); 
 
    if ($(target).length > 0) { 
 
    
 
    $('body').animate({ 
 
     scrollTop: $(target).offset().top 
 
    }, 1000, function(){ 
 
     $(target).trigger('click'); 
 
    }); 
 
    
 
    } 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#move"><p>Hello</p></a> 
 

 
<div> 
 
    <div id="one"> 
 
    One 
 
    </div> 
 
    <div> 
 
    some text 
 
    <div> 
 

 
    <div id="two"> 
 
    Two 
 
    </div> 
 
    <div> 
 
    some text 
 
    <div> 
 
    <a id="move" onclick="alert('A')"></a> 
 
</div>