Show / hide plus minus

Question

So, I have a job that shows / hides UL / LI, but I'm not sure what I am doing wrong, where does it not replace the +/- signs?

Here is my JS:

$(".top ul li:not(:has(li.current))").find("ul").hide().end() // Hide all other ULs
.click(function (e) {
if (this == e.target) {
    $(this).children('ul').slideToggle();
}
$(this).children("li.menu-item-has-children").text(this.toggle ? "-" : "+");
return false;
});

I have a class setting for adding li using li:before, which add a + sign in front of which, which has nested ul. But I'm not sure that I'm going to make the right choice to change signs.

Here is the fiddle I made:

http://jsfiddle.net/bc4mg13a/

Answer 1

Here you are: http://jsfiddle.net/bc4mg13a/13/

$(".menu-item-has-children").on("click", function(e){
  e.stopPropagation();
  var clickedLi = $(this);
  $("> ul", clickedLi).slideToggle();
  clickedLi.toggleClass("current"); 
});

For starters, your first js line has so many redundant things.

$( ". top ul li: not (: has (li.current))" ). find ( "ul" ). hide(). end()// UL .click

:

$( ". top ul li: not (.current)" ). find ( "ul" ). hide(). end()// UL .click

, , . , slidetoggle + "".

i css.

Answer 2

. , , js. , .

, js pageload, CSS display: none; :

.sub-menu {
  display: none; 
}

js , .menu-item-has-children, , UL.

. , :)

Answer 3

:

$(this).toggleClass('open');

:

if (this == e.target) {
    $(this).children('ul').slideToggle();
    $(this).toggleClass('open'); // <--
}

Answer 4

$(this).toggleClass('open'); , return false, , . , .

Answer 5

, ...

    $(".top ul li:not(:has(li.current))").find("ul").hide().end() // Hide all other ULs
.click(function (e) {
    if (this == e.target) {
        $(this).toggleClass("open");
        $(this).children('ul').slideToggle();
    }
    return false;
});

:

- :

.menu-item-has-children {
    &:before {
        content:"+ ";
        color: $white;
        width: 10px;
        display:inline-block;
    }
}
.open {
    &:before {
        content:"- ";
        color: $white;
        width: 10px;
        display:inline-block;
    }
}

Answer 6

: JS:

$(".top ul li:not(:has(li.current))").find("ul").hide().end() // Hide all other ULs
.click(function (e) {
    if (this == e.target) {
        $(this).children('ul').slideToggle();
        $(this).toggleClass('open'); // added
    }
    return false;
});

"$ (this).toggleClass('open'); , CSS, , .

Answer 7

$(this).toggleClass('open');

http://jsfiddle.net/bc4mg13a/5/

Answer 8

You do not need to use text(this.toggle ? "-" : "+");

Inside the condition, simply switch the class .openthat you already defined in SCSS / CSS.

Also -

$(this).toggleClass('open');

Jsfiddle