Question

我有一个jQuery手风琴，我的问题是双重的。

当您点击人名以关闭div时（在您点击打开它之后），它会关闭然后向上滑动整个窗口。我不希望它滑动整个窗口。
当您点击此人的图片打开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="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;   
     });

整个窗口仍在为我滑动。

Answer 1

在return false;

之后添加e.preventDefault();

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

Answer 3

我认为正在发生的事情是锚元素上的click事件没有被停止，因此页面试图导航到作为id param传递的元素的href，并且因此它向上滚动。

所以你应该尝试从bubbling up停止点击事件。

因此，您可以使用e.preventDefault();或return false;

如此DEMO所示。

打开全宽的jQuery Accordion Grid

3 个答案: