JQuery的ONCLICK菜单滑动

但ofcourse这是一个业余的版本。我需要的代码来处理DIV菜单的一次，我自动添加或删除菜单的，而不必更改此代码每一次：

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

我将如何去它在一个简单而有效的方法是什么？

来源

2015-07-13 Hardist

请检查我的答案。 –

请使用

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

来源

2015-07-13 12:08:58

谢谢，它可以工作，但它不会隐藏所有其他打开的div，当你打开多个。我会怎么做呢？ – Hardist

我已更新代码并进行了一些HTML更改。看到“DEMO” –

很好，非常感谢。尽管我还想知道一件事。我也想隐藏当前打开的div，onclick。所以我可以切换一个div。当我点击一个打开的div时，它会关闭并立即再次打开。 – Hardist

尝试这段代码。

$('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> 
 
\t <li>Div 1 Test 1</li> 
 
\t <li>Div 1 Test 2</li> 
 
\t <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> 
 
\t <li>Div 2 Test 1</li> 
 
\t <li>Div 2 Test 2</li> 
 
\t <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> 
 
\t <li>Div 3 Test 1</li> 
 
\t <li>Div 3 Test 2</li> 
 
\t <li>Div 3 Test 3</li> 
 
</ul> 
 
</div>

来源

2015-07-13 12:42:37

JQuery的ONCLICK菜单滑动

回答

相关问题