2015-04-28 1 views
0

Я работаю с бутстрапом 3 и функцией коллапса. Если я нажму на мой plus-icon, появится панель свернуть. Еще один щелчок и панель будут близки. Работает!jQuery toggleClass не работает с обрывом bootstrap (изменение значка/класса)

Но я хочу toggleClass мой значок .. onclick изменить на imgMinus (открыть коллапс), нажать еще раз, изменить на imgPlus (закрыть коллапс).

Here's my fiddle ...

Я стараюсь addClass и removeClass .. ничего не работает ...?

Мой снипп работает, если у меня есть только один Контейнер контента, но не с обоими!

$('.clickToggle').click(function() { 
      /*if ($(this).children('div').hasClass("imgPlus")) { 
      $(this).children('div').addClass("imgMinus"); 
      $(this).children('div').removeClass("imgPlus"); 
      }*/ 

      $(this).children('div').toggleClass('imgPlus imgMinus'); 
}); 

ответ

2

Вы близко! Я удалил теги скрипта из вашего html и поместил его в раздел JavaScript скрипта. Затем я удалил дополнительный скрипт для переключения клика.

Немного смущает, чтобы сказать, что здесь есть скрипка, известная, если это ее решает! Приведенный ниже код является единственным сценарием вам необходимо изменить с + на - и наоборот http://jsfiddle.net/02o08heq/31/

$(document).ready(function() { 
    $('.clickToggle').click(function() { 
     $(this).children('div').toggleClass('imgPlus imgMinus'); 
    }); 
}); 

Также в вашем скрипку вы имели addClass, когда я верю, что ты имел в виду toggleClass (даже если ваш фрагмент кода был его)

+0

вы правы .. спасибо. код был прав, но не в том месте. Теперь он находится в моем файле 'main.js'. – user2310852

+0

Добро пожаловать! Рад слышать, что это работает, вы были определенно близки, просто нужно было еще пару глаз :) – Worldgorger

0

Перед оных:

<script> 
    $(document).ready(function() { 
     $('.clickToggle').click(function() { 
      $(this).find('div').toggleClass("imgMinus"); 
      $(this).find('div').toggleClass("imgPlus"); 
     }); 
    }); 
</script> 

И так будет работать!

Смежные вопросы