JQUERY выпадающий Div выпуск

Question

JQUERY выпадающий Div выпуск

0

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

Когда пользователь нажимает на статус, выпадающий список появляется со ссылкой для изменения статуса текущего элемента. Он делает это, проверяя, имеет ли дочерний элемент класса "полный". В зависимости от того, возвращается ли это true или false, к выпадающему div добавляется другой контент.

Я загрузил свой код на скрипку, однако кнопка выпадающего меню не будет работать, но на моем компьютере все работает нормально.

То, что я достиг с моим кодом до сих пор, заключается в том, что когда пользователь нажимает статус, выпадающее меню появляется с правильной заменой ссылки статуса. Также, когда у пользователя есть одно раскрывающееся меню, которое уже открыто, и они нажимают строку состояния на другом аккордеоне, предыдущий закрывается перед тем, как открывается новый.

То, что я хочу выполнить, заключается в том, что когда пользователь щелкает в любом месте за пределами раскрывающегося списка, он закрывается и удаляется.

Как мне это сделать?

Вот скрипка: http://jsfiddle.net/mickzer/3MbRJ/4/

И СКВАЖИН

$(".status").live('click',function () {

    $(".change-status").fadeOut("normal", function() {
        $(this).remove();
    });

    var checkComplete=$(this).children().hasClass("complete");

    var changeStatus="<div class=\"change-status\"></div>";
    $(this).after(changeStatus);
    $(".change-status").hide();
    $(".change-status").fadeIn();

    if(checkComplete) {

        var statusType="<p class=\"mark\">Mark as Incomplete</p>";
        $(statusType).appendTo(".change-status");

    }

    else if(!checkComplete) {

        var statusType="<p class=\"mark\">Mark as Complete</p>";
        $(statusType).appendTo(".change-status");

    }       

});

Спасибо за любую помощь

mickzer 16 фев. 2014, в 16:19

Источник

0

Вот пара ответов, которые помогут вам начать. stackoverflow.com/questions/1403615/...
berentrom 16 фев. 2014, в 15:13

Теги:

javascript

jquery

html

css

append

1 ответ

Ещё вопросы

Вот пара ответов, которые помогут вам начать. stackoverflow.com/questions/1403615/...

mmai · Answer 1 · 2014-02-16T12-50-00.000Z

Я разветкил ваш код в этой скрипке: http://jsfiddle.net/Lar87/

Это то, чего вы хотите достичь?

    $(document).on('click', function (e) {
        closeAllStatus();

        candidates = $(e.target).parents('.status');
        if (candidates.length > 0) {
            showDropdown(candidates[0]);
        }
    });

function closeAllStatus () {
        $(".change-status").fadeOut("normal", function() {
            $(this).remove();
        });
}

function showDropdown(element){
        var checkComplete=$(element).children().hasClass("complete");

        var changeStatus="<div class=\"change-status\"></div>";
        $(element).after(changeStatus);

        if(checkComplete) {

            var statusType="<p class=\"mark\">Mark as Incomplete</p>";
            $(statusType).appendTo(".change-status");

        }

        else if(!checkComplete) {

            var statusType="<p class=\"mark\">Mark as Complete</p>";
            $(statusType).appendTo(".change-status");

        }       

    }