JQuery 点击菜单滑动

Question

我有以下可用的菜单：

当然这是业余版本。我需要代码来处理 div 菜单，一旦我自动添加或删除菜单，而不是每次都必须更改此代码：

$('#1').click(function () {
    $('#sub2').hide(150);
    $('#sub3').hide(150);
    $('#sub1').slideToggle(150);
});

我该如何以一种简单而有效的方式进行处理？

Answer 1

请用这个

$('#1,#2,#3').click(function () {
    var isActive = $(this).next("div").hasClass('active');
    $(".menu").each(function(){
        $(this).slideUp(150);
        $(this).removeClass('active')
    });
    if(! isActive ){
        $(this).next("div").slideToggle(150);
        $(this).next("div").addClass('active');
        $(this).siblings().next("div ul").hide(150);
    }  
});

DEMO1

更新代码

$(document).ready(function () {
    $('#1,#2,#3').click(function () {
        var isActive = $(this).next("div").hasClass('active');
        $(".menu").each(function(){
            $(this).slideUp(150).removeClass('active');
        });
        if(! isActive ){
            $(this).next("div").slideToggle(150).addClass('active');
            $(this).siblings().next("div ul").hide(150);
        }  
    });
});

DEMO2

Answer 2

试试这个代码。

$('div.show').click(function(){
  $('.menu').hide('slow');
  var idattr = $(this).attr('id');
   $('#sub'+idattr).slideToggle(150);
    $('#sub'+idattr).addClass('active')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1" class="show"><a href="#">Menu Div 1</a></div>
<div id="sub1" class="menu" style="display:none">
<ul>
 <li>Div 1 Test 1</li>
 <li>Div 1 Test 2</li>
 <li>Div 1 Test 3</li>
</ul>
</div>

<div id="2" class="show"><a href="#">Menu Div 2</a></div>
<div id="sub2" class="menu"  style="display:none">
<ul>
 <li>Div 2 Test 1</li>
 <li>Div 2 Test 2</li>
 <li>Div 2 Test 3</li>
</ul>
</div>

<div id="3" class="show"><a href="#">Menu Div 3</a></div>
<div id="sub3" class="menu"  style="display:none">
<ul>
 <li>Div 3 Test 1</li>
 <li>Div 3 Test 2</li>
 <li>Div 3 Test 3</li>
</ul>
</div>

JQuery 点击菜单滑动

JQuery Onclick Menu Slide

jquery

menu

onclick

slide