Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Проблемы с виджетом аккордион (https://javascript.ru/forum/dom-window/57790-problemy-s-vidzhetom-akkordion.html)

Eliot456 19.08.2015 19:54

Проблемы с виджетом аккордион
 
Здравствуйте, такой момент: если в тегах li списка содержатся данные в одну строку то все работает нормально, если в каждом теге li есть по нескольку строк то ul раскрывается не полностью, а ровно на столько на сколько он бы раскрылся если бы в каждом теге ли было по одной строке. Как с этим бороться подскажите

рони 19.08.2015 20:14

Eliot456,
формировать аккордион на видимых элементах и не использовать display: none;

Eliot456 19.08.2015 20:43

рони,
display:none не использую. Вот ссылка http://reduf.ru, может глянете? Буду очень признателен

рони 19.08.2015 22:01

Eliot456,
может проще сделать без jquery-ui.min.js
заменить script.js на
$(function() {
    $("#main-menu li > ul").each(function(indx, el) {
        $(el).hide().prev().on('click', function(event) {
            event.preventDefault()
            $(el).slideToggle()
        }).hover(function() {
                $(this).css({
                    "color": "#FF00FF"
                });
            },
            function() {
                $(this).css({
                    "color": "#000"
                });
            })
    })
});

Eliot456 20.08.2015 05:45

рони, Я к этому тоже пришел со временем, только окольными путями) Спасибо.

рони 20.08.2015 08:31

Eliot456,
проблем с высотой с css от jquery-ui нет, но общий дизайн нарушается, так что надо дизайнеров спрашивать.

Eliot456 20.08.2015 11:52

Цитата:

Сообщение от рони (Сообщение 384869)
Eliot456,
может проще сделать без jquery-ui.min.js
заменить script.js на
$(function() {
    $("#main-menu li > ul").each(function(indx, el) {
        $(el).hide().prev().on('click', function(event) {
            event.preventDefault()
            $(el).slideToggle()
        }).hover(function() {
                $(this).css({
                    "color": "#FF00FF"
                });
            },
            function() {
                $(this).css({
                    "color": "#000"
                });
            })
    })
});

А как в таком случае сделать чтобы при открытии другого подменю предыдущее раскрытое закрывалось?

рони 20.08.2015 12:29

Eliot456,
$(function() {
    var $ul = $("#main-menu li > ul");
    $ul.each(function(indx, el) {
        $(el).hide().prev().on("click", function(event) {
            event.preventDefault();
            $ul.not(el).slideUp();
            $(el).slideToggle()
        }).hover(function() {
            $(this).css({
                "color": "#FF00FF"
            })
        }, function() {
            $(this).css({
                "color": "#000"
            })
        })
    })
});

Eliot456 20.08.2015 13:05

Еще раз спасибо


Часовой пояс GMT +3, время: 14:11.