Мобильная навигация open close img

Я делаю мобильную навигацию и что включать изображение плюса и минуса, чтобы указать, когда подменю открыто или закрыто. У меня первая часть работает нормально, когда пользователь нажимает, чтобы открыть подменю, плюс img меняется на минус img, но теперь я могу заставить его вернуться, когда подменю закрыто

вот jquery

$(".listItem").click(function(){
   $(this).find('ul').slideToggle();
 $(this).children('img').attr('src',"images/minus.png");
 })

mobile jquery nav
person user3260707    schedule 03.10.2014    source источник
comment
Создайте рабочую скрипту в jsfiddle.net, контекст (html и css) очень важен   -  person MaximOrlovsky    schedule 03.10.2014
comment
Попробуйте что-нибудь вроде $(this).children('img').attr('src', function() { this.src == "images/minus.png" ? "images/plus.png" : "images/minus.png" });   -  person Regent    schedule 03.10.2014
comment
вот скрипка ссылка   -  person user3260707    schedule 03.10.2014

Ответы (1)


arrow_upward
0
arrow_downward

Мне нравится комментарий от @regent, и простой троичный код должен работать хорошо.

Альтернативным вариантом является установка изображения в качестве фонового изображения в вашем css, а затем вы можете использовать метод toggleClass() для установки изображения.

ДЕМО

HTML: (замените изображение navOpen элементом span с классом nav-icon)

<li class="listItem"><a href="#">Products</a><span class="nav-icon open"></span>

CSS:

.nav-icon{
    float:right;
    padding:3px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
}
.nav-icon.open {
    background-image: url('https://cdn2.iconfinder.com/data/icons/freecns-cumulus/16/519691-199_CircledPlus-20.png');
}
.nav-icon.close {
    background-image: url('https://cdn2.iconfinder.com/data/icons/freecns-cumulus/16/519692-200_CircledMinus-20.png');
}

jQuery: (найдите класс значка навигации в элементе списка и переключите на него класс открытия/закрытия

 $('.listItem').click(function(){
    $(this).find('ul').slideToggle();
    $(this).find('.nav-icon').toggleClass('open close');
 });
person jme11    schedule 03.10.2014
comment
P.S. в демонстрации я установил значок в абсолютное положение, чтобы вывести его из потока документа. Это гарантирует, что это не повлияет на центрирование вашего текста. Просто помните, что тогда вам нужно добавить position: относительно вашего класса элементов списка. - person jme11; 03.10.2014