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

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

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

Я пытаюсь создать аккордеон, где я могу развернуть / свернуть все разделы одним щелчком мыши. Мне также нужна возможность для пользователя открывать и закрывать разделы, в которых одновременно открыто 0– n разделов. Используя несколько обсуждений здесь, в stackoverflow и на форумах jquery, вот решение, которое я придумал: Мне также нужна возможность для пользователя открывать и закрывать разделы, в которых одновременно открыто 0– n разделов. Используя несколько обсуждений здесь, в stackoverflow и на форумах jquery, вот решение, которое я придумал: Мне также нужна возможность для пользователя открывать и закрывать разделы, в которых одновременно открыто 0– n разделов. Используя несколько обсуждений здесь, в 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», пока я не нажму где-нибудь на странице. Итак, что я вижу в пользовательском интерфейсе, так это то, что заголовок только что закрытого раздела имеет тот же цвет фона, что и мой эффект наведения, пока я не щелкну в другом месте, и он не перейдет к цвету «по умолчанию, не сфокусирован».

Кроме того, когда я используйте ссылку Свернуть все, все отлично выглядит в Firefox. В IE заголовок последнего раздела имеет такую ​​же расцветку при наведении курсора.

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

11
задан tia 1 February 2011 в 21:46
поделиться