Add / Remove the class by click



  • Say the code.

    <ul class="menu">
        <li> <a href="#">Ссылка</a><span class="pp">Клик</span>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li> <a href="#">Ссылка</a><span class="pp">Клик</span>
            <ul>
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </ul>
        </li>
    </ul>
    

    and js

    $(function() {
        $('.menu span').toggle(function(){
            $(this).siblings(".menu ul").show();  
            $(this).addClass('red');
            },function(){
            $(this).siblings(".menu ul").hide();  
            $(this).removeClass('red');
        });
    });
    

    He works perfectly with jquery 1.7.2, but with the last version, he doesn't. Who's gonna tell you what's wrong?



  • Problem http://api.jquery.com/toggle-event/

    The method was deleted in version 1.9

    In new versions, it can be replaced https://api.jquery.com/click/

    $(function() {
      $('.menu span').click(function() {
        $(this).siblings(".menu ul").toggle();
        $(this).toggleClass('red');
      });
    });
    li ul {
      display: none;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <ul class="menu">
      <li> <a href="#">Ссылка</a><span class="pp">Клик</span>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </li>
      <li> <a href="#">Ссылка</a><span class="pp">Клик</span>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </li>
    </ul>

    UPDATE only one

    $(function() {
      $('.menu span').click(function() {
        $('.active').add(
            $(this).toggleClass('red')
            .parent()
          ).toggleClass('active')
          .children('ul')
          .toggle();
      });
    });
    li ul {
      display: none;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <ul class="menu">
      <li> <a href="#">Ссылка</a><span class="pp">Клик</span>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </li>
      <li> <a href="#">Ссылка</a><span class="pp">Клик</span>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </li>
    </ul>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2