简单的Accordion语法

时间:2012-01-13 19:31:45

标签: javascript jquery jquery-animate

我想弄清楚为什么导航链接不会打开手风琴。我确信只有一些jquery没有正确的语法。我更改了jquery代码中的选择器,现在它不会工作。

我确信这是一个训练有素的眼睛,这应该是一个快速解决方案。

有人可以帮忙吗?

//////////////////////////// // http://www.adipalaz.com/experiments/jquery/accordion.html /////////////////////////// (function($) { //http://www.mail-archive.com/jquery-en@googlegroups.com/msg43851.html $.fn.orphans = function(){ var txt = []; this.each(function(){$.each(this.childNodes, function() { if (this.nodeType == 3 && $.trim(this.nodeValue)) txt.push(this) })}); return $(txt); }; //http://www.learningjquery.com/2008/02/simple-effects-plugins: $.fn.fadeToggle = function(speed, easing, callback) { return this.animate({opacity: 'toggle'}, speed, easing, callback); }; $.fn.slideFadeToggle = function(speed, easing, callback) { return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback); }; })(jQuery); //////////////////////////// $(function() { $('.collapse').hide(); $('.expand').orphans().wrap(''); //demo 4 - div.demo:eq(3) - queued slide effects: $('div.demo .expand').click(function() { var $thisCllps = $(this).next('.collapse'); var $cllpsVisible = $(this).ul('.expand').next('.collapse:visible'); ($cllpsVisible.length) ? $(this).toggleClass('open').siblings('.expand').removeClass('open') .next('.collapse:visible').slideUp(400, function() { $thisCllps.slideDown(); }) : $thisCllps.slideToggle().prev('.expand').toggleClass('open'); return false; }); });

    <div class="demo">


        <ul class="collapse" class="ul" style="display: none; ">
          <li>Item 1.1.</li>    
          <li>Item 1.2.</li>
        </ul>

        <ul class="collapse" class="ul" style="display: none; ">
          <li>Item 2.1.</li>    
          <li>Item 2.2.</li>
        </ul>

        <ul class="collapse" class="ul" style="display: none; ">
          <li>Item 3.1.</li>    
          <li>Item 3.2.</li>
        </ul>
    </div>
<ul>
<li>
    <h4 class="expand"><a href="#" title="expand/collapse">Slide Up/Down UL 1</a></h4>
</li>
<li>
    <h4 class="expand"><a href="#" title="expand/collapse">Slide Up/Down UL 2</a></h4>
</li>
<li>
    <h4 class="expand"><a href="#" title="expand/collapse">Slide Up/Down UL 3</a></h4>
</li>
</ul>

1 个答案:

答案 0 :(得分:0)

为什么不使用Jquery手风琴功能?

http://docs.jquery.com/UI/Accordion