Question

下面是我的简单手风琴代码。它一旦点击就有一个不确定的跳跃，就像单击HASH标签时页面滚动到顶部..尝试添加e.preventDefault（）;但没有帮助..问候

PS：编辑要求我添加更多细节，我想知道我可以提供更多细节，如果它只是添加文本而编辑认为它有足够的细节那么它可以我会写几句话，但我仍然认为它要我添加更多内容，让我现在尝试//

jQuery('.toggle-content').each(function() {       
  $(this).css('height', $(this).height());
  if(!jQuery(this).hasClass('open')){
    jQuery(this).hide();
  } else
    jQuery(this).show();
});

jQuery("h4.toggle").click(function(){      
  if(jQuery(this).parents('.accordian').length >=1){
    var accordian = jQuery(this).parents('.accordian');

    if(jQuery(this).hasClass('active')){
      jQuery(accordian).find('h4.toggle').removeClass('active');
      jQuery(accordian).find(".toggle-content").slideUp();
    } else {
      jQuery(accordian).find('h4.toggle').removeClass('active');
      jQuery(accordian).find(".toggle-content").slideUp();

      jQuery(this).addClass('active');
      jQuery(this).next(".toggle-content").slideToggle();
    }
  } else {
    if(jQuery(this).hasClass('active')){
      jQuery(this).removeClass("active");
    }else{
      jQuery(this).addClass("active");
    }
  }
});

jQuery("h4.toggle").click(function(){    
  if(!jQuery(this).parents('.accordian').length >=1){
    jQuery(this).next(".toggle-content").slideToggle();
  }
});

这是HTML ..

    <div class="accordian">
      <h4 class="toggle active">
        <a href="#"><span class="arrow"></span>Toggle 1 Heading</a>
      </h4>
      <div style="display: block;" class="toggle-content open">
        toggle 1 data...
      </div>

      <h4 class="toggle">
        <a href="#" style="border-bottom:0 !important;"><span class="arrow"></span>Toggle 2 heading</a>
      </h4>
      <div style="display: none;" class="toggle-content">
        toggle 2 content..
      </div>
    </div>

Answer 1

将您的href属性从href="#"修改为：href="javascript:void(0);"

点击HASH标志时jquery手风琴跳转

1 个答案: