Показать только один скрытый div

Question

Я hidding 2 divs, и я хочу сделать, что в это же время будет показано только одно из них.

Например, если я нажму сначала - он появится. Затем я нажимаю на вторую, а затем сначала прячутся и показываю только второй div.

<div id="showmenu">Click Here</div> 
<div class="menu" style="display: none;"><ul><li>Button1</li><li>Button2</li><li>Button3</li></ul></div> 

<br><br> 

<div id="showmenu2">Click Here</div> 
<div class="menu2" style="display: none;"><ul><li>Button1</li><li>Button2</li><li>Button3</li></ul></div> 

    $(document).ready(function() { 
     $('#showmenu').click(function() { 
       $('.menu').toggle("slide"); 
     }); 
    }); 

    $(document).ready(function() { 
     $('#showmenu2').click(function() { 
       $('.menu2').toggle("slide"); 
     }); 
    }); 

http://jsfiddle.net/APA2S/3337/

Answer 1

Используйте это:

$(document).ready(function() { 
    $('#showmenu').click(function() { 
     $('.menu').toggle("slide"); 
     $('.menu2').hide("slide");//hide the menu2 when the menu is clicked 
    }); 

    $('#showmenu2').click(function() { 
     $('.menu2').toggle("slide"); 
     $('.menu').hide("slide");//hide the menu when the menu2 is clicked 
    }); 
}); 

JSFIDDLE: http://jsfiddle.net/ghorg12110/APA2S/3338/

Answer 2

Попробуйте это,

$(document).ready(function() { 

    $('#showmenu').click(function() { 
     $('.menu').slideDown(); 
     $('.menu2').slideUp(); 
    }); 

    $('#showmenu2').click(function() { 
     $('.menu2').slideDown(); 
     $('.menu').slideUp(); 
    }); 

}); 

Answer 3

Вот, попробуйте это один:

$(document).ready(function() { 
    $('#showmenu').click(function() { 
      $('.menu, .menu2').stop().slideUp(); 
      $('.menu').stop().toggle("slideDown"); 
    }); 

    $('#showmenu2').click(function() { 
      $('.menu, .menu2').stop().slideUp(); 
      $('.menu2').stop().toggle("slideDown"); 
    }); 
}); 

Избегайте повторения $ (документ) .ready, Я также исправить анимацию ...

Fiddle: http://jsfiddle.net/APA2S/3344/

Answer 4

замените следующий сценарий будет работать:

$(document).ready(function() { 
    $('#showmenu').click(function() { 
      $('.menu').toggle("slide"); 
      $('.menu2').hide("slide"); 
    }); 
}); 

$(document).ready(function() { 
    $('#showmenu2').click(function() { 
      $('.menu2').toggle("slide"); 
      $('.menu').hide("slide"); 
    }); 
}); 

Answer 5

$(document).ready(function() { 
    $('#showmenu').click(function() { 
     $('.hidden').hide(); 
      $('.menu').toggle("slide"); 
    }); 
}); 

$(document).ready(function() { 
    $('#showmenu2').click(function() { 
     $('.hidden').hide(); 
     $('.menu2').toggle("slide"); 
    }); 
}); 

Demo dont forget для добавления скрытого класса в свои меню вы можете использовать этот код, если у вас есть более 2 меню

Answer 6

вы можете попробовать: просто используйте hide(), вы его получите.

$(document).ready(function() { 
    $('#showmenu2').click(function() { 
        $('.menu').hide(); 
       $('.menu2').toggle("slide"); 

     }); 

      $('#showmenu').click(function() { 
        $('.menu2').hide(); 
       $('.menu').toggle("slide"); 

     }); 
});