Jquery ui accordion - несколько аккордеонов расширяют/сворачивают все проблемы стиля

Я пытаюсь создать аккордеон, где я могу развернуть/свернуть все разделы одним щелчком мыши. Мне также нужна возможность для пользователя открывать и закрывать секции, имеющие открытые за один раз секции. Используя несколько обсуждений здесь, в stackoverflow и на форумах jquery, вот решение, которое я придумал: Я реализовал каждый раздел в качестве собственного аккордеона, где каждый из них имеет значение collapsible = true.

<html>
    <head>
        <title>Accordion Test</title>

        <script type="text/javascript" src="../scripts/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="../scripts/jquery-ui-1.8.4.custom.min.js"></script>

        <link rel="stylesheet" href="../_templates/css/jquery-ui-1.8.6.custom.css"  type="text/css" />
        <link rel="stylesheet" href="../_templates/css/jquery.ui.accordion.css" type="text/css" />
    </head>

<body>
        <a onClick="expandAll()">Expand All</a>
        <br>
        <a onClick="collapseAll()">Collapse All</a>
            <div id="accordion1" class="accord">
            <h5><a href="#">section 1</a></h5>
            <div>
                    section 1 text  
            </div>
            </div>

            <!-- orders section -->
            <div id="accordion2" class="accord">
            <h5><a href="#">section 2</a></h5>
            <div>
                    section 2 text  
            </div>
            </div>

            <!--  section 3 -->
            <div id="accordion3" class="accord">
            <h5><a href="#">section 3</a></h5>
            <div>
                    section 3 text  
            </div>
            </div>

            <!-- section 4 -->
            <div id="accordion4">
            <h5><a href="#">section 4</a></h5>
            <div>
                    section 4 text                  
            </div>
            </div>


</body>
</html>


<script type="text/javascript">

$(function() {
    $('#accordion1').accordion({
        header: 'h5',
        collapsible: true,
        autoHeight: false
    });
});
$(function() {
    $('#accordion2').accordion({
        header: 'h5',
        collapsible: true,
        autoHeight: false,
        active: false
    });
});
$(function() {
    $('#accordion3').accordion({
        header: 'h5',
        collapsible: true,
        autoHeight: false,
        active: false
    });
});
$(function() {
    $('#accordion4').accordion({
        header: 'h5',
        collapsible: true,
        autoHeight: false,
        active: false
    });
});

</script>

<script type="text/javascript">
$(document).ready(function() {

})

function expandAll() {
    alert("calling expandAll");
    $("#accordion1, #accordion2, #accordion3, #accordion4")
        .filter(":not(:has(.ui-state-active))")
        .accordion("activate", 0);
}

function collapseAll() {
    alert("calling collapseAll");
    $("#accordion1, #accordion2, #accordion3, #accordion4")
        .filter(":has(.ui-state-active)")
        .accordion("activate", -1);
}

</script>

Проблема, с которой я сталкиваюсь, - это когда я нажимаю заголовок открытого раздела, раздел свертывается, как ожидалось, но заголовок все еще имеет класс "ui-state-focus", пока я не щелкнул в другом месте на стр. Итак, что я вижу в ui, заголовок только что закрытого раздела имеет тот же цвет фона, что и мой эффект зависания, пока я не щелкнул в другом месте, и он переключится на цвет по умолчанию, а не сфокусирован.

Кроме того, когда я использую ссылку Collapse All, все отлично выглядит в Firefox. В IE заголовок последнего раздела имеет одинаковую окраску фокуса.

Любые предложения? Должен ли я каким-то образом вынуждать аккордеон терять фокус, когда он закрыт? Как я могу это сделать?

Ответы

Ответ 1

После попыток перегрузить мои стили jquery-ui на странице и попытаться взломать javascript для аккордеона, чтобы удалить класс ui-state-focus, появилось простое решение.

Поскольку моя страница отображает ожидаемое поведение, когда я нажимаю else, где на странице, я использовал blur(), чтобы потерять фокус.

$(document).ready(function() {
    // forces lose focus when accordion section closed. IE and FF.
    $(".ui-accordion-header").click(function(){
          $(this).blur();
        });

})

Чтобы устранить проблему с крахом все в IE, я добавил 1 строку к моему методу collallAll().

function collapseAll() {
    alert("calling collapseAll");
    $("#accordion1, #accordion2, #accordion3, #accordion4")
        .filter(":has(.ui-state-active)")
        .accordion("activate", -1);
    $(".ui-accordion-header").blur();
}

Ответ 2

Решение для реализации аккордеона со всеми открытыми панелями. Панели статичны и не могут быть закрыты.

Не инициализируйте аккордеон div с помощью виджета аккордеона!

$("#accordion").addClass("ui-accordion ui-widget ui-helper-reset")
  .find('h3')
  .addClass("current ui-accordion-header ui-helper-reset ui-state-active ui-corner-top")
  .prepend('<span class="ui-icon ui-icon-triangle-1-s"/>')
  .next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active");

Ответ 3

это мой ответ ~ надеюсь на его помощь

для множественного открытия вы можете сделать это, используя существующий пользовательский интерфейс jquery, просто добавьте опции beforeActivate:

мой код ниже:

$( "#accordion" ).accordion({
        header: "> div > h3",
        autoHeight: false,
        collapsible: true,
        active: false,
        beforeActivate: function(event, ui) {
             // The accordion believes a panel is being opened
            if (ui.newHeader[0]) {
                var currHeader  = ui.newHeader;
                var currContent = currHeader.next('.ui-accordion-content');
             // The accordion believes a panel is being closed
            } else {
                var currHeader  = ui.oldHeader;
                var currContent = currHeader.next('.ui-accordion-content');
            }
             // Since we've changed the default behavior, this detects the actual status
            var isPanelSelected = currHeader.attr('aria-selected') == 'true';

             // Toggle the panel header
            currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));

            // Toggle the panel icon
            currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);

             // Toggle the panel content
            currContent.toggleClass('accordion-content-active',!isPanelSelected)    
            if (isPanelSelected) { currContent.slideUp('fast'); }  else { currContent.slideDown('fast'); }

            return false; // Cancels the default action
        }
    });

обратитесь к: jQuery UI-аккордеон, который открывает несколько разделов?

а функция свернуть и развернуть

function accordion_expand_all()
{
  var sections = $('#accordion').find("h3");
  sections.each(function(index, section){
    if ($(section).hasClass('ui-state-default') && !$(section).hasClass('accordion-header-active')) {
      $(section).click();
    }
  });

}

function accordion_collapse_all()
{
  var sections = $('#accordion').find("h3");
  sections.each(function(index, section){
    if ($(section).hasClass('ui-state-active')) {
      $(section).click();
    }
  });
}

что он..

Ответ 4

Вы можете попробовать этот небольшой, легкий плагин.

У него будет несколько доступных вариантов, которые мы можем изменить в соответствии с нашим требованием.

URL: http://accordion-cd.blogspot.com/