Как закрыть «тумблер» из другой функции в jQuery

Question

Если щелкнуть div.msg_head, то .msg_row скользит вниз, используя animate, что работает в моем примере. Моя проблема в том, что я пытаюсь написать функцию, которая закроет все области сообщений перед тем, как сдвинуть второе сообщение, по которому щелкнули.

Вот пример:

http://jsfiddle.net/rZR5y/2/

Answer 1

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

Достаточно просто: не используйте переключатель.

var $allMail = $(".msg_head");
$allMail.click(function() {
    var $this = $(this);
    if( $this.hasClass('opened') ) {
        $this.removeClass('opened').slideUp();
    } else {
        // assuming 'body' is the class of the div you want to show/hide
        $allMail.removeClass('opened').find('.body').slideUp();
        $this.addClass('opened').find('.body').slideDown();
    }
);

Надеюсь, это то, что вы ищете.
Ура!

Answer 2

РАБОЧИЙ ДЕМО

• оставить открытыми все сообщения
• рассчитать высоту каждой области сообщения
• записать высоту в .data () для каждой области сообщения
• близко
• сотвори волшебство на клике!

JQuery:

    $('.m_short_msg').each(function(e) {
        var h = $(this).height();
        $(this).data('height', h);
    });

    $('.m_short_msg').css({height: '19px'});

    $('.msg_row').click(function() {
        var d = $(this).find('.m_short_msg');
        check = (d.height() === d.data('height')) ?
                d.animate({height: '19px'}) :
                ( $('.m_short_msg').animate({height: '19px'}) ) ( d.animate({height: d.data('height')}) ) ;
    });

EDIT Используя .animate () вы можете добавить множество анимационных эффектов к вашим элементам из пользовательского интерфейса jQuery.

С помощью этого скрипта вы даже можете ЗАКРЫТЬ открытое сообщение, щелкнув по нему! Поэтому я нахожу это еще более удобным для пользователя.

Еще один «+» этого скрипта - это то, что фактически позволяет пользователю видеть первую строку самого сообщения ... для справки. И это также UserFriendly ™

---

Если вы планируете использовать «заголовок сообщения» вместо отображения первой строки сообщения, вы можете сделать это:

DEMO 2

$('.msg_row').click(function() {
    var d = $(this).find('.msg');
    check = (d.is(':visible')) ? d.slideUp() : ($('.msg').slideUp())(d.slideDown());
});

Он также проверяет открытые сообщения и имеет возможность ЗАКРЫТЬ открытое сообщение при повторном нажатии.

Answer 3

Вы можете комбинировать используемые атрибуты id и class, чтобы получить что-то вроде: http://jsfiddle.net/toopay/pUYpU/

Answer 4

почему бы тебе не использовать аккордин?Я думаю, что это подходит для вас и очень приятно:

http://jqueryui.com/demos/accordion/