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

Question

我试图制作一个简单的手风琴菜单 当您单击菜单时，将显示子菜单：

点击＆＃34; A＆＃34;或＆＃34; B＆＃34;或＆＃34; C＆＃34;，将显示您的相应子菜单

如果信件的子菜单是打开的，关闭它的唯一方法是再次点击该信件

没有办法将jquery应用于点击的类

＆＃13;

＆＃13;

$(document).ready(function () {
    $(".submenu").slideDown(); // open web there all submenu close

  $(".UP").click(function () {
      $(".submenu").slideUp();
  });

  $(".DOWN").click(function () {
      $(".submenu").slideDown();
  });

});

＆＃13;

        <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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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

Answer 2

我稍微修改了你的代码，希望你能理解

$(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

您需要更改html和js中的位 看看下面的Js：

to

并更改html

$(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');
  });

});