jQuery Accordion Grid, която се отваря с пълна ширина - javascript, jquery, html, css

Имам jQuery Акордеон и проблемът ми е двукратен.

1. Когато щракнете върху името на лицата, за да затворите div (след като сте кликнали, за да го отворите), той се затваря и след това плъзга целия прозорец нагоре. Не искам да плъзне целия прозорец нагоре.

2. Когато щракнете върху изображението на човека, за да отворите div и след това щракнете, за да го затворите, div се затваря, но след това отново се отваря и целият прозорец се плъзга нагоре.

Моето 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();
});
});
});

И моят HTML изглежда така:

<div class="accordion"><!-- THUMBNAIL -->
<div class="accordion-item">
<a class="accordion-section-title" href="#accordion-1">
<img src="/images/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>

Някой знае ли защо се случва това?

Редактиран за добавяне на нова функция:

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

Целият този прозорец все още се плъзга нагоре за мен.

Отговори:

0 за отговор № 1

добави return false; след e.preventDefault();

---

0 за отговор № 2

Надявам се това да работи за вас,

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

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

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

---

0 за отговор № 3

Мисля, че случващото се е, че събитието за щракване върху котвания елемент не се спира и поради което страницата се опитва да се насочи към id на елемента, предаден като href парам и оттам се превърта нагоре.

Затова трябва да опитате да спрете събитието за щракване bubbling up.

Така че или можете да използвате e.preventDefault(); или return false;

Както е показано в това ДЕМОНСТРАЦИЯ.

---