W TRAKCIE Kategorie - klikalne +/-

Chciałbym mieć klikalne ikonki +/- przy każdej "rozwijalnej" kategorii aby móc ją głównie oznaczyć (że istnieją podrzędne kategorie).
Na chwilę obecną mam to na sztywno zrobione - statyczna ikona. Zależy mi jednak na zmiennej ikonie +/-. Testuję obecnie kod JS ale aby działał muszę umieścić przed linkiem kategorii taki kod:

Kod:

<a href="javascript:void"><i class="fa fa-plus-circle"></i></a>

Próbowałem tym:

Kod:

#box_menu ul li a::before {
content: "<a href="javascript:void"><i class="fa fa-plus-circle"></i></a>”;
}

Ale oczywiście nie mogę dodawać linków poprzez CSS. Czy jest jakaś inna alternatywa?

 

Próbowałem znaleźć na szybko klasę i id, ale nie mam na tyle czasu. Sprawdź stylami z ::after ::before i content: "+" koniecznie dodawaj !important bo inaczej nie zastąpisz tego co jest.
Użyj też dla linków pseudoklas: link, visited, hover, active

 

Na chwilę obecną mam:

Kod:

#box_menu ul li a::before {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    content: "\f138";
    font-size: 10px;
    padding-right: 6px;
}

To wrzuca na sztywno, czyli tak samo wygląda przy zwiniętej lub nie gałęzi kategorii.
Dlatego próbuje to zrobić inaczej, poprzez JS w stylach i wrzucenie zamiast
content: "\f138";
tego
#box_menu ul li a::before {
content: "<a href="javascript:void"><i class="fa fa-plus-circle"></i></a>”;
}
Ale CSS nie akceptuje <a href="javascript:void"><i class="fa fa-plus-circle"></i></a> jako content...

 

Nie używaj żadnego js, skup się na na najwyższej klasie/id on ma wtedy dodane current, jeśli tego nie ma to jest zwinięty czyli w content ma "+" jeśli to ma to jest aktywny i ma w content "-" wszystko samym stylem.

 

Tak więc użyłem twój pomysł i na razie osiągnąłem to:

Kod:

#box_menu ul li a::before {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    content: "\f196";
    font-size: 10px;
    padding-right: 6px;
}
#box_menu ul.level_2 a::before {
    display: none;
}
#box_menu ul li.current > a::before {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    content: "\f147";
    font-size: 10px;
    padding-right: 6px;
}
#box_menu ul.level_2.current a::before {
    display: none;
}

Mniej więcej jest ok ale nie wiem jak dokładnie zrobić aby nie wyświetlać +/- dla ostatniej, podrzędnej kategorii. Na teraz używam display: none ale nie jest idealne gdyż jest to ustawione na sztywno (w chwili obecnej mam takich najwięcej zagłębień kategorii) i w przypadku większego zagłębienia nie zda egzaminu...
@TheL jakaś mała porada?

 

możesz od pewnego zagłębienia li li dać po prostu dla wszystkich na sztywno display:none; aby to dokładnie przeanalizować potrzeba trochę czasu, a ja tu tylko dziś na chwilkę

 

Dzięki. Jeszcze popróbuję ale jak będziesz miał chwile czasu, to rzuć okiem...

 

zobaczę co się da zrobić, ale nic nie obiecuję forum jest na 2 miejscu po zarabianiu na życie

 

Haha, jak zapewne większość z nas! To jest kosmetyka, więc czas mnie nie goni. Jeżeli znajdziesz czas, to będzie fajnie. Dzięki z góry!

 

i tak widzę, że dużo się udało zrobić