一個簡單的vertica菜單手風琴JavaScript Jquery

Question

我試圖制作一個簡單的手風琴菜單，當您單擊菜單時，將顯示子菜單：

當您單擊“ A”或“ B”或“ C”時，將顯示各自的子菜單

如果字母的子菜單處於打開狀態，則關閉它的唯一方法是再次單擊該字母

沒有辦法只將jquery應用於clicked類

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

我稍微修改了您的代碼，希望您能理解

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

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

});

並更改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>