一个简单的vertica菜单手风琴JavaScript Jquery

Question

I'm trying to make a simple accordion menu When you click on the menu the submenus are shown:

When you click "A" or "B" or "C", your respective submenu will be displayed

If the submenu of the letter is open, the only way to close it is to click on the letter again

did not get the way to just apply the jquery to the clicked class

https://jsfiddle.net/mafervemg/g0rb9xL1/

 $(document).ready(function () { $(".submenu").slideDown(); // open web there all submenu close $(".UP").click(function () { $(".submenu").slideUp(); }); $(".DOWN").click(function () { $(".submenu").slideDown(); }); }); 

  <p class="UP"> Click Here For Closet Sub Menu</p> <p class="DOWN">Click Here For Open</p> <ul class="menu"> <li><a href="#">A</a></li> <li> <ul class="submenu"> <li><a href="#">a 1</a></li> <li><a href="#">a 2</a></li> <li><a href="#">a 3</a></li> <li><a href="#">a 4</a></li> </ul> </li> <li><a href="#">B</a></li> <li> <ul class="submenu"> <li><a href="#">b 1</a></li> <li><a href="#">b 2</a></li> <li><a href="#">b 3</a></li> <li><a href="#">b 4</a></li> </ul> </li> <li><a href="#">C</a></li> <li> <ul class="submenu"> <li><a href="#">c 1</a></li> <li><a href="#">c 2</a></li> <li><a href="#">c 3</a></li> <li><a href="#">c 4</a></li> </ul> </li> </ul> 

Answer 1

错误：未定义$是因为未正确包含jQuery

 <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>

Answer 2

I slightly changed your code, Hope you can understand

 $(document).ready(function() { $("submenu").slideDown(); // open web there all submenu close $('.toggle-menu').addClass('opened'); $(".UP").click(function() { $(".submenu").slideUp(); $('.toggle-menu').removeClass('opened').addClass('closed'); }); $(".DOWN").click(function() { $(".submenu").slideDown(); $('.toggle-menu').removeClass('closed').addClass('opened'); }); $('.toggle-menu').click(function() { if ($(this).hasClass('opened')) $(this).removeClass('opened').addClass('closed').siblings('.submenu').slideUp(); else $(this).removeClass('closed').addClass('opened').siblings('.submenu').slideDown(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p class="UP"> Click Here For Closet Sub Menu</p> <p class="DOWN">Click Here For Open</p> <ul class="menu"> <li> <a href="#" class="toggle-menu">A</a> <ul class="submenu"> <li><a href="#">a 1</a></li> <li><a href="#">a 2</a></li> <li><a href="#">a 3</a></li> <li><a href="#">a 4</a></li> </ul> </li> <li> <a href="#" class="toggle-menu">B</a> <ul class="submenu"> <li><a href="#">b 1</a></li> <li><a href="#">b 2</a></li> <li><a href="#">b 3</a></li> <li><a href="#">b 4</a></li> </ul> </li> <li> <a href="#" class="toggle-menu">C</a> <ul class="submenu"> <li><a href="#">c 1</a></li> <li><a href="#">c 2</a></li> <li><a href="#">c 3</a></li> <li><a href="#">c 4</a></li> </ul> </li> </ul> 

Answer 3

You need to change a bit in your html and js Have a look at Js below:

$(document).ready(function () {
    $("submenu").slideDown(); // open web there all submenu close
    $(".toggle").addClass('open');
  $(".UP").click(function () {
      $(".submenu").slideUp();
      $(".toggle").removeClass('open');
  });

  $(".toggle").click(function(){
    if($(this).hasClass("open")){
      $(this).parent().find(".submenu").slideUp();
    } else {
      $(this).parent().find(".submenu").slideDown();
    }
    $(this).toggleClass('open');
  })

  $(".DOWN").click(function () {
      $(".submenu").slideDown();
      $(".toggle").addClass('open');
  });

});

and change html

     <p class="UP"> Click Here For Closet Sub Menu</p>
        <p class="DOWN">Click Here For Open</p>

        <ul class="menu">
            <li><a href="#" class='toggle'>A</a>
                <ul class="submenu">
                    <li><a href="#">a 1</a></li>
                    <li><a href="#">a 2</a></li>
                    <li><a href="#">a 3</a></li>
                    <li><a href="#">a 4</a></li>
                </ul>
</li>

            <li><a href="#" class='toggle'>B</a>    <ul class="submenu">
                    <li><a href="#">b 1</a></li>
                    <li><a href="#">b 2</a></li>
                    <li><a href="#">b 3</a></li>
                    <li><a href="#">b 4</a></li>
                </ul></li>

            <li><a href="#" class='toggle'>C</a>    <ul class="submenu">
                    <li><a href="#">c 1</a></li>
                    <li><a href="#">c 2</a></li>
                    <li><a href="#">c 3</a></li>
                    <li><a href="#">c 4</a></li>
                </ul></li>

        </ul>