为什么不能从div onclick添加和删除类？

Question

I'm trying to do this: clicking a > to show a list and a V , click again to close the list and change V back to > . Here is my code

 function toggle() { var toggleClosed = $(this).find(".toggle-closed"); var toggleOpened = $(this).find(".toggle-opened"); if (!$(toggleClosed).is(":visible")) { toggleClosed.removeClass('toggle-opened').addClass('toggle-closed'); toggleOpened.removeClass('toggle-closed').addClass('toggle-opened'); } else { $(toggleClosed).addClass('toggle-closed').removeClass('toggle-opened'); $(toggleOpened).addClass('toggle-opened').removeClass('toggle-closed'); } } 

 .form-row-filter { background-color: grey; } .toggle-opened { cursor: pointer; display: block; } .toggle-closed { cursor: pointer; display: none; } .material-icons { margin-right: -4px; margin-left: 4px; vertical-align: middle; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-row-filter" style="display:inline-block"> <ul> <div class="material-icons toggle-opened" onclick="toggle()">&gt;</div> <div class="material-icons toggle-closed" onclick="toggle()">V</div> <li class="toggle-closed"> company a </li> <li class="toggle-closed"> company b </li> </ul> </div> 

Here is a codepen:

https://codepen.io/thinkvantagedu/pen/MNORvZ?editors=1100

Why wouldn't the class being added or removed?

Answer 1

Here is your code fixed: https://codepen.io/anon/pen/BXmgdo

The mistakes were in the JS:

function toggle () {

  var toggleClosed = $('.toggle-closed');
  var toggleOpened = $('.toggle-opened');

  toggleClosed.removeClass('toggle-closed').addClass('toggle-opened');
  toggleOpened.removeClass('toggle-opened').addClass('toggle-closed');
}

Answer 2

I would probably only use jQuery's toggleClass in this situation.

As simple as:

$(".toggle-element").toggleClass("toggle-closed").toggleClass("toggle-opened");

You can use it for managing arrows too. So, this is how I would do your toggle method:

function toggle () {
    $(".toggle-element").toggleClass("toggle-closed").toggleClass("toggle-opened");
    $(".toggle-trigger").toggleClass("closed");
}

Where .toggle-trigger class could contain different arrows based on .closed class. You can even remove one of those classes completely.

$(".toggle-element").toggleClass("toggle-closed");

This would work just fine.

Here's an example: https://codepen.io/anon/pen/JgOQax?editors=1100

And the code:

  function toggle () { $(".toggle-element").toggleClass("toggle-closed"); $(".toggle-trigger").toggleClass("closed"); } 

 .form-row-filter { background-color: grey; } .toggle-closed { cursor: pointer; display: none; } .material-icons { margin-right: -4px; margin-left: 4px; vertical-align: middle; } .toggle-trigger::after{ content: "v"; } .toggle-trigger.closed::after{ content: ">"; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-row-filter" style="display:inline-block"> <ul> <span class="material-icons toggle-trigger closed" onclick="toggle()"></span> <li class="toggle-element toggle-closed"> company a </li> <li class="toggle-element toggle-closed"> company b </li> </ul> </div> 

Answer 3

Aside from Rory's valid point about your HTML markup, the following should work. You'll want to replace all instances of toggleme with a name that is relevant to your elements, and unique from anything else in the document.

 $(".toggleme").click(function(){ $(".toggleme").toggleClass("toggle-closed"); $(".toggleme").toggleClass("toggle-opened"); }) 

 .toggle-opened { display: block; } .toggle-closed { display: none; } 

 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <div class="form-row-filter" style="display:inline-block"> <ul> <div class="material-icons toggle-opened toggleme">&gt;</div> <div class="material-icons toggle-closed toggleme">V</div> <li class="toggle-closed toggleme"> company a </li> <li class="toggle-closed toggleme"> company b </li> </ul> </div>