Jquery Accordion基于.class打开

时间:2017-02-27 10:42:36

标签: javascript jquery html accordion

我有以下JQuery代码来操作我的手风琴菜单。

 <script type="text/javascript" src="/media/jui/js/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        function close_accordion_section() {
            $('.accordion .accordion-section-title').removeClass('active');
            $('.accordion .accordion-section-content').slideUp(300).removeClass('open');
        }
        $('.accordion-section-title').click(function(e) {
            // Grab current anchor value
            var currentAttrValue = $(this).attr('href');

            if($(e.target).is('.active')) {
                close_accordion_section();
            }else {
                close_accordion_section();

                // Add active class to section title
                $(this).addClass('active');
                // Open up the hidden content panel
                $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
            }

            e.preventDefault();
        });
    });
    </script>

如何修改代码以检测当前&#39;类并从以下html脚本中打开相应的面板。

<div class="main" style="width:300px">
    <div class="accordion">
        <div class="accordion-section">
           <a class="accordion-section-title" href="#accordion-1">accordion-1</a>
           <div id="accordion-1" class="accordion-section-content" >
              <ul class="nav menuside">
                  <li><a href="#">Here</a></li>
                  <li><a href="#">Here</a></li>
                  <li><a href="#">Here</a></li>
                  <li><a href="#">Here</a></li>
                  <li><a href="#">Here</a></li>
              </ul>
           </div>
        </div>
    <div class="accordion-section">
        <a class="accordion-section-title" href="#accordion-2">accordion-2</a>
        <div id="accordion-2" class="accordion-section-content">
            <ul class="nav menuside">
                <li><a href="#">Here</a></li>
                <li><a href="#">Here</a></li>
                <li class="current"><a href="#">Here</a></li>
                <li><a href="#">Here</a></li>
                <li><a href="#">Here</a></li>
            </ul>
        </div><!--end .accordion-section-content-->
    </div><!--end .accordion-section-->
  </div>
</div>

如何开放手风琴面板的当前课程。

0 个答案:

没有答案