jQuery UI Accordion Scrolls Page up

时间:2014-04-01 04:41:04

标签: javascript jquery jquery-ui accordion

我确信那里有一些东西可以解释发生了什么以及如何解决它,但我找不到它,所以请给我一些松懈。如果你向下滚动手风琴一些,然后点击一个手风琴标题,一旦它打开页面跳跃或向上滚动。我不希望它这样做,我把它与UI演示进行了比较,不知道我哪里出错了。求救!

http://jsfiddle.net/BBvJ4/

$(function() {

  $("#accordion").accordion({
    autoHeight: false,
    navigation: true
  });

});

<div id="accordion">

  <h4 id="accordion-header-1"><a href="#">Accoridon Heading</a></h4>
  <div>
    <p>Erat fiant veniam mirum parum. Dolor nihil nihil claram sollemnes notare. Ut parum quam ipsum lius ut. Ullamcorper typi claritate tation nostrud wisi assum. Clari sit laoreet qui augue consuetudium. Lorem me demonstraverunt qui exerci qui. facilisi iriure nobis processus qui. Habent ut quinta ex dolore diam. Lectores tation claram congue eodem quod. Clari sit laoreet qui augue consuetudium. Lorem me qui exerci qui. Luptatum facilisi nobis . Habent ut quinta ex dolore diam. Lectores tation claram congue eodem quod.</p>
  </div>

  <h4 id="accordion-header-2"><a href="#">Accoridon Heading</a></h4>
  <div>
    <p>Erat fiant veniam mirum parum. Dolor nihil nihil claram sollemnes notare. Ut parum quam ipsum lius ut. Ullamcorper typi claritate tation nostrud wisi assum. Clari sit laoreet qui augue consuetudium. Lorem me demonstraverunt qui exerci qui. facilisi iriure nobis processus qui. Habent ut quinta ex dolore diam. Lectores tation claram congue eodem quod. Clari sit laoreet qui augue consuetudium. Lorem me qui exerci qui. Luptatum facilisi nobis . Habent ut quinta ex dolore diam. Lectores tation claram congue eodem quod.</p>
  </div>

  <h4 id="accordion-header-3"><a href="#">Accoridon Heading</a></h4>
  <div>
    <p>Erat fiant veniam mirum parum. Dolor nihil nihil claram sollemnes notare. Ut parum quam ipsum lius ut. Ullamcorper typi claritate tation nostrud wisi assum. Clari sit laoreet qui augue consuetudium. Lorem me demonstraverunt qui exerci qui. facilisi iriure nobis processus qui. Habent ut quinta ex dolore diam. Lectores tation claram congue eodem quod. Clari sit laoreet qui augue consuetudium. Lorem me qui exerci qui. Luptatum facilisi nobis . Habent ut quinta ex dolore diam. Lectores tation claram congue eodem quod.</p>
  </div>

</div><!-- end #accordion -->

<div id="dummy"></div>

#accordion {
  display: inline;
  width: 71.138211%;
  /* 700px (div width) / 984px (container width) */ }
  #accordion .ui-accordion-content {
    width: 100%;
    background-color: #dbd5d1;
    color: #363535;
    font-size: 1em; }
  #accordion h4 {
    background-image: url(../images/accordion-plus.png);
    background-repeat: no-repeat;
    background-position: 11px 5px;
    color: #ffffff;
    font-size: 1em;
    /* 16px (from comp) / 16px (browser default size) */
    height: 30px;
    cursor: pointer;
    padding: 5px 8px 0 41px; }
    #accordion h4#accordion-header-1 {
      background-color: #474747; }
    #accordion h4#accordion-header-2 {
      background-color: #7b7979; }
    #accordion h4#accordion-header-3 {
      background-color: #000000; }
    #accordion h4.ui-state-active {
      background-image: url(../images/accordion-minus.png); }
    #accordion h4 a:link, #accordion h4 a:visited {
      color: #ffffff;
      font-weight: 300; }
    #accordion h4 a:hover, #accordion h4 a:focus {
      text-decoration: none; }
  #accordion p {
    margin: 0;
    padding: 10px 20px 25px 39px; }

#dummy { height: 500px; width: 100px; }

0 个答案:

没有答案