Связать .addClass() с другими функциями?

Предполагая раскрывающийся список аккордеона со стандартной формой:

<ul>
  <li>
  <a href="#">Main Element</a>
    <ul>
      <li>
      <a href="#">Dropdown Element</a>
      </li>
    </ul>
  </li>
</ul>

Я использую jQuery для расширения при нажатии ссылки родительского элемента:

var $j = jQuery.noConflict();

function initMenus() {
    $j('ul.menu ul').hide();
    $j.each($j('ul.menu'), function(){
        $j('#' + this.id + '.expandfirst ul:first').show();
    });
    $j('ul.menu li a').click(
        function() {
            var checkElement = $j(this).next();
            var parent = this.parentNode.parentNode.id;

            if($j('#' + parent).hasClass('noaccordion')) {
                $j(this).next().slideToggle('normal');
                return false;
            }
            if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
                if($j('#' + parent).hasClass('collapsible')) {
                    $j('#' + parent + ' ul:visible').slideUp('normal');
                }
                return false;
            }
            if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
                $j('#' + parent + ' ul:visible').slideUp('normal');
                checkElement.slideDown('normal');
                return false;
            }
        }
    );
}
$j(document).ready(function() {initMenus();});

Чтобы добавить класс к основному элементу при нажатии (он же класс включается каждый раз, когда раскрывающийся список раскрывается), я безуспешно пытаюсь использовать .toggleClass(className), скорее всего, из-за моего позиционирования. Куда я могу добавить этот элемент, чтобы получить желаемый эффект?


jquery jquery-selectors
person Anders H    schedule 20.08.2010    source источник
comment
Для начала вы делаете странные вещи с родителем — получаете идентификатор, используя стандартный DOM, а затем используете jQuery для его выбора. Измените var parent = this.parentNode.parentNode.id; на var parent = $j(this).parent().parent().   -  person Matt Ball    schedule 20.08.2010
comment
Затем вы можете изменить селекторы, такие как $j('#' + parent + ' ul:visible') на parent.find('ul:visible');. find() на самом деле быстрее и менее подвержено ошибкам.   -  person Matt Ball    schedule 20.08.2010
comment
Как отмечено ниже, я вижу, что метод .parent лучше, чем .parentNode в целом, и я ценю увеличение скорости/уменьшение ошибок, но я все еще не вижу, с чем мне следует переключать класс.   -  person Anders H    schedule 20.08.2010

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте заменить эту строку:

var parent = this.parentNode.parentNode.id;

с:

var parent = $j(this).parent().closest('a').attr('id');

И вместо:

$j(this).next().slideToggle('normal');

Пытаться:

$j(this).parent().closest('a').slideToggle('normal');

closest перемещается вверх, чтобы найти ближайшую ссылку, которая в вашем случае является основной ссылкой.

person Sarfraz    schedule 20.08.2010
comment
Это кажется лучшим методом, но, похоже, он не решает проблему добавления класса к родительскому элементу, что является текущей проблемой, с которой я борюсь. Я переключаю код с .parentNode на .parent. - person Anders H; 20.08.2010
comment
Вы можете добавить класс с addClass следующим образом: $j(this).parent().closest('a').addClass('class_name_here'); - person Sarfraz; 20.08.2010