jQuery Akkordeon Gitter, das sich in voller Breite öffnet

Question

Ich habe ein jQuery Akkordeon und mein Problem ist zweifach.

1. Wenn Sie auf die Personen klicken Sie nennen das div zu schließen (nachdem Sie geklickt haben, es zu öffnen) es schließt dann das ganze Fenster nach oben gleitet. Ich möchte nicht, dass es das ganze Fenster hochgleitet.

2. Wenn Sie auf das Bild der Person klicken, um das div zu öffnen, und dann klicken, um es zu schließen, schließt das div, öffnet sich dann aber wieder und das gesamte Fenster wird nach oben verschoben.

Meine jQuery:

jQuery(function($){ 
$(document).ready(function() { 
    // do something... 
    function close_accordion_section() { 
jQuery('.accordion .accordion-item .accordion-section-title').removeClass('active'); 
jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open'); 
} 

    jQuery('.accordion-section-title').click(function(e) { 
// Grab current anchor value 
var currentAttrValue = jQuery(this).attr('href'); 

if(jQuery(e.target).is('.active')) { 
    close_accordion_section(); 
}else { 
    close_accordion_section(); 

    // Add active class to section title 
    jQuery(this).addClass('active'); 
    // Open up the hidden content panel 
    jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
} 

e.preventDefault(); 
}); 
}); 
}); 

Und mein HTML sieht aus wie:

<div class="accordion"><!-- THUMBNAIL --> 
<div class="accordion-item"> 
<a class="accordion-section-title" href="#accordion-1"> 
<img src="http://placehold.it/150x150" alt="First Last" width="150" height="150" /> 
</a> 

<span class="accordion-section-name"> 
<a class="accordion-section-title" href="#accordion-1">First Name</a></span> 
<span class="accordion-section-expertise">Expertise</span> 
</div> 
<!--end .accordion-item--> 
<!-- ABOUT --> 

<div id="accordion-1" class="accordion-section-content"> 
<div class="advisors"> 
<ul class="advisors"> 
    <li>Marketing and Communications</li> 
    <li>Sales and Business Development</li> 
    <li>Finance</li> 
    <li>Startup Strategy</li> 
</ul> 
</div> 
<div class="about"> 
<p class="about">About</p> 
Biography 
</div> 

Weiß jemand, warum dies geschieht?

Edited neue Funktion hinzufügen:

jQuery(function($){ 
$(document).ready(function() { 
    // do something... 
    function close_accordion_section() { 

jQuery('.accordion .accordion-item .accordion-section-title').removeClass('active'); 
jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open'); 
} 

    jQuery('.accordion-section-title').click(function(e) { 
e.preventDefault(); 

var currentAttrValue = jQuery(this).attr('href'); 
    currentAttrValue = currentAttrValue.substring(1, currentAttrValue.length); 

jQuery("#" + currentAttrValue).slideToggle(); 


    }); 
    }); 
return false; 
    }); 

Das gesamte Fenster gleitet immer noch für mich.

Answer 1

hinzufügen return false; nach e.preventDefault();

Answer 2

Hope this für Sie arbeiten,

jQuery('.accordion-section-title').click(function(e) { 
    e.preventDefault(); 

    var currentAttrValue = jQuery(this).attr('href'); 
     currentAttrValue = currentAttrValue.substring(1, currentAttrValue.length); 

    jQuery("#" + currentAttrValue).slideToggle(); 
}); 

Answer 3

Ich denke, was passiert ist, dass das Click-Ereignis auf dem Ankerelement wird nicht gestoppt wird und wegen dem die Seite versucht, zum id des als href übergebenen Elements zu navigieren, und daher scrollt es nach oben.

So sollten Sie versuchen, das Klickereignis von bubbling up zu stoppen.

So können Sie entweder e.preventDefault(); oder return false;

Wie in dieser DEMO gezeigt verwenden.