Как я могу переключать классы так, чтобы щелчок по телу отключал выпадающее меню и изменял фон оставшегося элемента (jquery)? - PullRequest
Новая
       13

Как я могу переключать классы так, чтобы щелчок по телу отключал выпадающее меню и изменял фон оставшегося элемента (jquery)?

1 голос
/ 22 января 2011

Существует раскрывающееся меню, состоящее из кнопки развернуть / свернуть (# client-select) и раскрывающегося меню (.client-select-dd). Само меню работает просто отлично, за исключением того, что я хочу, чтобы оно также было разборным, если пользователь щелкает в любом месте за пределами меню вместо того, чтобы специально нажимать кнопку еще раз.

Изначально меню свернуто, поэтому первый щелчок меняет фон кнопки меню (# client-select) и делает видимыми раскрывающиеся параметры (.client-select-dd). Этот первый щелчок также добавляет класс к телу (.client-deactivate). При нажатии (# client-select) снова сворачивается меню и восстанавливается кнопка фонового изображения.

По моему мнению, нажатие на тело, когда меню открыто (и имеет класс .client-deactivate), должно свернуть меню и удалить .client-deactivate, но нажатие на тело абсолютно ничего не делает. Спасибо за любую помощь, которую вы можете предоставить. 

$("#client-select").click (function() {
  $("body").toggleClass("client-deactivate");
  $(".client-select-close").toggleClass("client-select-open");
  $(".client-select-dd").toggle();
});

$(".client-deactivate").click (function() {
  $(".client-select-open").toggleClass("client-select-close");
  $(".client-select-dd").toggle();
});

Ответы [ 2 ]

3 голосов
/ 24 января 2011

Разобрался:

$ ("# client-select"). Live ('click', function () {$ ("# client-select"). AddClass ("client-select-open "); $ (" # client-select "). removeClass (" client-select-close "); $ (". client-select-dd "). css (" display "," block "); $ ("body"). addClass ("client-deactivate");}); 

$(".client-deactivate").live('click', function() {
  $("#client-select").removeClass("client-select-open");
  $("#client-select").addClass("client-select-close");
  $(".client-select-dd").css("display", "none");
  $("body").removeClass("client-deactivate");
});
0 голосов
/ 22 января 2011

Вероятно, это связано с тем, что когда обработчик щелчка впервые читается браузером, в теге body отсутствует класс ".client-deactivate". Кроме того, вы не хотите, чтобы переключал что-либо, когда вы щелкаете по телу, потому что тогда, если меню свернуто и вы щелкнете по телу, оно расширит меню. Я предполагаю, что вы хотите, чтобы обработчик щелчков тела закрывал меню, только если оно уже открыто.

Попробуйте изменить обработчик второго клика на: 

$("body").click(function() {
  if($("body").hasClass("client-deactivate") {
    $(".client-select-open").toggleClass("client-select-close");
    $(".client-select-dd").toggle();
    $("body").removeClass("client-deactivate");
  }
});

Вы можете также рассмотреть возможность замены этих функций переключения на removeClass, просто чтобы быть уверенным, что нажатие на тело не раскроет меню ... Как если бы другая функция свернула меню, но не удалила "client- деактивируйте "класс к телу", затем, щелкнув по телу, вы все равно получите имя класса и запустите приведенный выше код, переключая меню в открытое положение.

...