Мобилна навигация отваряне затваряне 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, който има клас на икона за навигация)

<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. в демонстрацията зададох иконата на абсолютна позиция, за да я извадя от потока на документа. Това ще гарантира, че няма да повлияе на центрирането на вашия текст. Само не забравяйте, че тогава трябва да добавите позиция: спрямо вашия клас елемент от списъка. - person jme11; 03.10.2014