Question

我有一个自定义手风琴，默认情况下有“可见/开放”状态下的所有选项。

当我第一次点击时，它会关闭特定元素。但是当我再次点击它时，它会打开那个特定的元素但是全部关闭。

它应该崩溃并一次打开一个元素。

这是我的手风琴代码：

HTML：

<div id='accordionmenu' class="clear">
<ul class="grid-18">
    <li class="inputRow active"> <a href='javascript:;'><h2 class="first">Heading #1</h2></a>
        <ul>
            <li>
                <div class="grid-8">Content for heading 1</div>
            </li>
        </ul>
    </li>
    <li class="inputRow active"> <a href='javascript:;'><h2 class="first">Heading #2</h2></a>
        <ul>
            <li>
                <div class="grid-8">Content for heading 2</div>
            </li>
        </ul>
    </li>
    <li class="inputRow active"> <a href='javascript:;'><h2 class="first">Heading #3</h2></a>
        <ul>
            <li>
                <div class="grid-8">Content for heading 3</div>
            </li>
        </ul>
    </li>

JS

 $('#accordionmenu > ul > li:has(ul)').addClass("has-sub");
 $('#accordionmenu > ul > li > a').click(function () {
     var checkElement = $(this).next();
     $(this).removeClass('active');
     $(this).closest('li').addClass('active');

     if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
         $(this).closest('li').removeClass('active');
         checkElement.slideUp('normal');
     }

     if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
         $('#accordionmenu ul ul:visible').slideUp('normal');
         checkElement.slideDown('normal');
     }

     if (checkElement.is('ul')) {
         return false;
     } else {
         return true;
     }
 });

以下是相同的小提琴：http://jsfiddle.net/XLw2Z/

如果您需要任何其他信息，请与我们联系。

请建议。

Answer 1

这是其他手风琴切换的原因：

 if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
     $('#accordionmenu ul ul:visible').slideUp('normal');
     checkElement.slideDown('normal');
 }

评论第$('#accordionmenu ul ul:visible').slideUp('normal');行。一切都像你想要的那样。

Answer 2

试试这个 http://jsfiddle.net/5vG9Z/

 $('#accordionmenu > ul > li:has(ul)').addClass("has-sub");
 $('#accordionmenu > ul > li > a').click(function () {

     $(this).next().toggle('slow')

     return false;
 });

保持所有Accordion选项可见，但一次打开/关闭或折叠一个

2 个答案: