Question

Настраиваю меню на сайте - http://plamya-tlt.ru/, хочу сделать иконку (стрелку) вверх/вниз чтобы показывала когда меню свернуто и когда развернуто, для этого вставил скрипт, который будет менять class объекта с помощью которого я буду выводить иконку.

Скрипт:

$(document).ready(function(){
  $("#t1").click(function(){
    $("#c1").slideToggle();
      $(".up1").switchClass("up1", "down1", 1000);
      $(".down1").switchClass("down1", "up1", 1000);
  });

Функция сворачивает меню и меняет класс down1 на up1 но при повторном нажатии она меняет up1 на down1 и down на up1 - как ей заложено в скрипте. Но по инструкции отсюда: https://jqueryui.com/switchClass/ этого не должно происходить.

Подскажите в чем может быть проблема? В системе uCoz?

Comments

Я не понял, вы хотите чтобы он переключал? Так же он это и делает как надо, как основан скрипт.

---

Сейчас скрипт выполняется на 50% > тоесть меняет up1 на down1 но не down1 на up1. А на странице https://jqueryui.com/switchClass/ меняет еще и обратно.

Сейчас подставил картинки стрелок, можно увидеть наглядно.

Грубу говоря, если прокликать ЗАКРЫТЬ и ОТКРЫТЬ то картинка замерает, и уже не меняется.

---

Выкрутился вот так:

<script>
$(function () {
    $.getScript("//code.jquery.com/ui/1.11.4/jquery-ui.js", function(){
        $("#t1").click("click", function () {
            $("#c1").slideToggle();
            $(".up1").toggleClass("down1", 1000);
        });
        $("#t2").click("click", function () {
            $("#c2").slideToggle();
            $(".up2").toggleClass("down2", 1000);
        });
    });
});
</script>

И в css: 

.navigation li.t1.up1, .navigation li.t1.up2 {background:url(/img/arrow-up.png) no-repeat 270px center;}
.navigation li.t1.down1, .navigation li.t1.down2 {background:url(/img/arrow-down.png) no-repeat 270px center;}

down обязательно снизу, чтобы он имел привосходство над up1
Скрипт подставляет рядом с up1 класс down1 - и так как down1 имеет привосходство в css над классом up1 то картинка меняется, а при втором клике на кнопку класс down1 убирается.

Answer 1

Попробуйте заменить ваш код

<script>
$(document).ready(function(){
 $("#t1").click(function(){
 $("#c1").slideToggle();
 $(".down1").switchClass("down1", "up1", 1000);
 $(".up1").switchClass("up1", "down1", 1000);
 });
 $("#t2").click(function(){
 $("#c2").slideToggle();
 $(".down2").switchClass("down2", "up2", 1000);
 $(".up2").switchClass("up2", "down2", 1000);
 });
});
</script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

на

<script>
$(function () {
    $.getScript("//code.jquery.com/ui/1.11.4/jquery-ui.js", function(){
        $("#t1").on("click", function () {
            $("#c1").slideToggle();
            $(".down1").switchClass("down1", "up1", 1000);
            $(".up1").switchClass("up1", "down1", 1000);
        });
        $("#t2").on("click", function () {
            $("#c2").slideToggle();
            $(".down2").switchClass("down2", "up2", 1000);
            $(".up2").switchClass("up2", "down2", 1000);
        });
    });
});
</script>

 

Comments

Эффект тот же, за то короче код :)

---

До версии JQuery 1.7 использовалась такая конструкция:

$('#element').click(function () {
    ....
});

начиная с версии 1.7 следует писать

$("#element").on("click", function () {
    ....
})

У вас сейчас на сайте не то и не другое...

$("#t1").click("click", function () {

Удивительно, но даже с такой конструкцией все работает как надо. Стрелка меняется. Но все же пропишите правильно