jQuery скрипт для переключения и ручка кнопки "Закрыть".


Во-первых: я всего новичок в JavaScript и поэтому я прошу вас оценить мой сценарий и скажи мне, будет ли его хорошо или просто большой беспорядок. Примечание: это работает, но я предполагаю, что это могло быть улучшено.

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

$(function(){
    var toggleOpen      = $('*.[data-toggle="open"]');
    var toggleContent   = $('*.[data-toggle="content"]');
    var toggleClose     = $('*.[data-toggle="close"]');
    var toggleSpeed     = 500;
    //Set height of toggle content to avoid animation jumping
    toggleContent.css('height', toggleContent.height() + 'px');
    //Find content to toggle
    function findNextContent(target){
        var nextContent = target.parent().parent().parent().find(toggleContent);
        return nextContent;
    }
    //Toggle content
    function slideToggle(target){
        target.stop(true,true).slideToggle(toggleSpeed);
    }
    //CLose toggled content
    function closeToggle(target){
        target.slideUp(toggleSpeed);
    }
    //On Open Click
    toggleOpen.click(function(){
        var clicked     = $(this);
        var nextContent = findNextContent(clicked);
        //Check if hidden to either scroll to bottom or not
        if(nextContent.is(':hidden')){
            slideToggle(nextContent);
            smoothScrolling(toggleClose);
        }else{
            slideToggle(nextContent);
        }
        return false;
    });
    //On Close click
    toggleClose.click(function(){
        var clicked     = $(this);
        var nextContent = findNextContent(clicked);
        closeToggle(nextContent);
        return false;
    });
});

Что он делает: он переключает элемент и он также заботится о кнопка Закрыть отдельно.

Я рад за любые отзывы, будь то положительные или отрицательные!



1172
2
задан 10 ноября 2011 в 03:11 Источник Поделиться
Комментарии
2 ответа

function findNextContent(target){
var nextContent = target.parent().parent().parent().find(toggleContent);
return nextContent;
}

Вы могли бы использовать jQuery с ближайшим функция здесь.
Или вы могли бы удалить переменную и вобще верните целевую.родитель().родитель().родитель().найти(toggleContent);

toggleClose.click(function(){
var clicked = $(this);
var nextContent = findNextContent(clicked);
closeToggle(nextContent);
return false;
});

Нет необходимости в нажатии переменной. Вы можете просто написать findNextContent($(это));

Возможно, вы также захотите взглянуть на Ария-расширенных атрибутов.

3
ответ дан 10 ноября 2011 в 08:11 Источник Поделиться

ОК, этот код выглядит нормально для меня. Единственное, что я могу предположить, что вы, возможно, предпочитают использовать событие.метод preventDefault вместо того, чтобы возвращать false в обработчики событий, потому что в jQuery возвращает false в обработчик событий, причины события.метод preventDefault() и событие.это происходит(), который вы не хотите.

Ссылки:

2
ответ дан 10 ноября 2011 в 05:11 Источник Поделиться