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 Onclick菜单幻灯片

2 个答案: