手风琴的另一种方法

时间:2011-10-22 18:57:24

标签: javascript jquery accordion

所以这就是场景:我正在使用这种手风琴方法(http://jsbin.com/uqosap/6)修复一个有25-30页的网站。这是我的手风琴的javascript方法,因为我坚持使用html结构,用于25-30页,我不想要搞乱CSS。所以相反,我只是在它上面放置一个javascript,这样就像手风琴一样。

我的问题:

  1. 单击标题时,它不会与顶部对齐,因此您必须向下滚动才能看到手风琴的内容。点击后,标题应在顶部自动对齐,以便内容在屏幕上显示。

  2. 我搞砸了为班级添加if条件。它不能按我想要的方式运行。它应该为当前活动的标题应用“启用”类,其余的将具有“禁用”类。

  3. 我很乐意感谢任何帮助。

    谢谢。

    [编辑]

    以下是我为javascript所做的事情。

      <script type="text/javascript">
    
        $(document).ready(function(){
          $('.accordion .hdr:first').next().stop(false,true).slideDown(1000);
          $('.accordion .hdr:first').addClass('enable')
          $('.accordion .hdr').click(function(){
            $('.accordion .content').hide();
            $('.accordion .hdr').addClass('disable');
            $(this).next().stop(false,true).slideDown(1000);
            $(this).find(".aj_a").css({"background-position":"0 -43px","width":"20px","height":"15px","margin-right":"1px"}) 
    
             if($(this).hasClass('disable')) {
                $(this).addClass('enable');
             }
             else {
                $('.accordion .hdr').addClass('disable');
                $(this).addClass('enable');
              }
    
          });    
        });
    
      </script> 
    

    ,这是html的结构。

      <ul class="accordion">
        <li>
          <div class="hdr">heading 1</div>
          <div class="content"><p><strong>Heading 1 Content:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque rhoncus diam sollicitudin porta. Aliquam condimentum nibh a massa ultrices tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent neque mauris, adipiscing a vulputate non, laoreet a est. Integer tincidunt, enim ac tempor imperdiet, libero purus hendrerit risus, sit amet tristique leo nisi sed erat. Donec sit amet eleifend arcu. Ut placerat lacinia malesuada.
    
    Nulla facilisi. Vestibulum felis lacus, tincidunt a semper et, accumsan eu urna. Mauris pharetra facilisis tellus dapibus ultricies. Suspendisse non turpis sit amet nisl dictum egestas. Mauris sagittis elit eu felis commodo posuere. Nullam velit leo, porttitor sit amet faucibus at, mollis a purus. Maecenas varius dui nec ligula imperdiet sit amet gravida orci sagittis.
    
    Fusce mi sem, luctus ut faucibus vel, hendrerit quis diam. Fusce ut metus felis, volutpat mattis nisi. Ut luctus quam a libero euismod eleifend. Aliquam at quam vel risus semper laoreet. Maecenas non velit dolor. Praesent in odio eget urna faucibus condimentum vel at ante. Aliquam non purus nec odio lacinia ornare. Fusce luctus tellus sed leo tristique cursus. Phasellus dapibus tempor nunc nec euismod. Proin est nulla, feugiat eu tempor vel, iaculis sed lorem. Donec dictum viverra libero, eu fermentum arcu imperdiet eu. Nullam ultricies, tellus ut fermentum consectetur, mauris eros fermentum lacus, ac tincidunt magna nulla et libero. Fusce laoreet cursus magna sit amet rutrum. Ut mollis interdum nunc, at pulvinar mauris auctor gravida. Nullam faucibus massa ut dolor eleifend nec molestie velit consectetur. In augue nibh, rhoncus eget consectetur ac, posuere nec lorem.</p></div>
        </li>
    
    
        <li>
          <div class="hdr">heading 2</div>
          <div class="content"><p><strong>Heading 2 Content:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque rhoncus diam sollicitudin porta. Aliquam condimentum nibh a massa ultrices tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent neque mauris, adipiscing a vulputate non, laoreet a est. Integer tincidunt, enim ac tempor imperdiet, libero purus hendrerit risus, sit amet tristique leo nisi sed erat. Donec sit amet eleifend arcu. Ut placerat lacinia malesuada.
    
    Nulla facilisi. Vestibulum felis lacus, tincidunt a semper et, accumsan eu urna. Mauris pharetra facilisis tellus dapibus ultricies. Suspendisse non turpis sit amet nisl dictum egestas. Mauris sagittis elit eu felis commodo posuere. Nullam velit leo, porttitor sit amet faucibus at, mollis a purus. Maecenas varius dui nec ligula imperdiet sit amet gravida orci sagittis.
    
    Fusce mi sem, luctus ut faucibus vel, hendrerit quis diam. Fusce ut metus felis, volutpat mattis nisi. Ut luctus quam a libero euismod eleifend. Aliquam at quam vel risus semper laoreet. Maecenas non velit dolor. Praesent in odio eget urna faucibus condimentum vel at ante. Aliquam non purus nec odio lacinia ornare. Fusce luctus tellus sed leo tristique cursus. Phasellus dapibus tempor nunc nec euismod. Proin est nulla, feugiat eu tempor vel, iaculis sed lorem. Donec dictum viverra libero, eu fermentum arcu imperdiet eu. Nullam ultricies, tellus ut fermentum consectetur, mauris eros fermentum lacus, ac tincidunt magna nulla et libero. Fusce laoreet cursus magna sit amet rutrum. Ut mollis interdum nunc, at pulvinar mauris auctor gravida. Nullam faucibus massa ut dolor eleifend nec molestie velit consectetur. In augue nibh, rhoncus eget consectetur ac, posuere nec lorem.</p></div>
        </li>
    
        <li>
          <div class="hdr">heading 3</div>
          <div class="content"><p><strong>Heading 3 Content:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque rhoncus diam sollicitudin porta. Aliquam condimentum nibh a massa ultrices tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent neque mauris, adipiscing a vulputate non, laoreet a est. Integer tincidunt, enim ac tempor imperdiet, libero purus hendrerit risus, sit amet tristique leo nisi sed erat. Donec sit amet eleifend arcu. Ut placerat lacinia malesuada.
    
    Nulla facilisi. Vestibulum felis lacus, tincidunt a semper et, accumsan eu urna. Mauris pharetra facilisis tellus dapibus ultricies. Suspendisse non turpis sit amet nisl dictum egestas. Mauris sagittis elit eu felis commodo posuere. Nullam velit leo, porttitor sit amet faucibus at, mollis a purus. Maecenas varius dui nec ligula imperdiet sit amet gravida orci sagittis.
    
    Fusce mi sem, luctus ut faucibus vel, hendrerit quis diam. Fusce ut metus felis, volutpat mattis nisi. Ut luctus quam a libero euismod eleifend. Aliquam at quam vel risus semper laoreet. Maecenas non velit dolor. Praesent in odio eget urna faucibus condimentum vel at ante. Aliquam non purus nec odio lacinia ornare. Fusce luctus tellus sed leo tristique cursus. Phasellus dapibus tempor nunc nec euismod. Proin est nulla, feugiat eu tempor vel, iaculis sed lorem. Donec dictum viverra libero, eu fermentum arcu imperdiet eu. Nullam ultricies, tellus ut fermentum consectetur, mauris eros fermentum lacus, ac tincidunt magna nulla et libero. Fusce laoreet cursus magna sit amet rutrum. Ut mollis interdum nunc, at pulvinar mauris auctor gravida. Nullam faucibus massa ut dolor eleifend nec molestie velit consectetur. In augue nibh, rhoncus eget consectetur ac, posuere nec lorem.</p></div>
        </li>
    
    
      </ul>
    

1 个答案:

答案 0 :(得分:1)

  1. 对于滚动,我更喜欢jQuery插件scrollTo。然后将回调function() { $.scrollTo($(this)); }作为第二个参数添加到.slideDown(1000)
  2. .removeClass('disable')之前添加.addClass('enable')
  3. 另见updated code