Using .text() to select a class but having issues with spaces within the html

$('li.' + $(this).text()).toggle(true);

This code is used to take from a subnav below.

<div class="subNav">
        <ul>
     <li class="button">sun protect开发者_高级运维ive clothing</li>
        </ul>
 </div>

These are products that will be visible.

<div class="sun-protective-clothing"></div>

You must use JavaScript's replace() function to replace all spaces with dashes. Note using replace(" ", "-") like this will only replace the first instance of a space in the string. you must use a RegEx with the global search to replace all instances; such as / /g

$('li.' + $(this).text().replace(/ /g, "-")).toggle(true);

you need to replace the spaces with dashes. Try

$('li.' + $(this).text().replace(/ /g, "-")).toggle(true);

I would recommend no using the text inside the li and do something like this:

<div class="subNav">
    <ul>
 <li class="button" target="sun-protective-clothing">sun protective clothing</li>
    </ul>
</div>

and:

$('.' + $(this).attr("target")).toggle(true);

This way you can put whatever you want inside the li, and not have it affect your logic.