Question

我正在制作一个页面，其中有三个按钮1）任务，2）愿景，3）管理

这里的功能必须是 1.单击任务按钮，将打开一个单独的div（＃mission1）。

2.通过单击Vision按钮，另一个div（＃vision1）将在＃mission1 div的同一位置打开，并且＃mission1＆amp; #mteam divs将关闭。

通过单击管理按钮，另一个div（#mteam）将在＃mission1＆amp;的相同位置打开。＃vision1 divs和＃mission1，＃vision1 divs将关闭。等等

我编码了以下内容脚本

$('document').ready(function() {

   $('#show1').click(function(){

     $('#mission1').slideToggle();  


       });

       $('#show2').click(function(){

           $(' #vission1').slideToggle();



           });


           $('#show3').click(function(){

            $('#mteam').slideToggle();   

               });
});

CSS

 #mission1 
  {
    width:450px; 
    height:200px; 
    background:#069; 
    margin-top:10px;
    display:none; 
    position:absolute; }


  #vission1
  {
    width:450px; 
    height:200px; 
    background:#096;
    margin-top:10px;
    display:none; 
    position:absolute; }

    #mteam
  {
    width:450px; 
    height:200px; 
    background:#CC3;
    margin-top:10px;
    display:none; 
    position:absolute; }

HTML

<button id="show1">Mission</button>
<button id="show2">Vision</button>
<button id="show3">Management</button>

         <div id="mission1">Abcd</div>
         <div id="vission1">VVVVVVV</div>
         <div id="mteam">MMMMMMMMM</div>

See Demo

我已经完成了，但我面临的问题只是隐藏问题。只有在单击相同的按钮但没有单击其他按钮后才能操作我的隐藏。

请帮帮我怎么做。非常感谢提前

Answer 1

根据您当前的代码：

$('#show1').click(function(){
     $('#vision1, #mteam').slideUp();
     $('#mission1').slideToggle();  
});

$('#show2').click(function(){
     $('#mission1, #mteam').slideUp();
     $('#vission1').slideToggle();  
});

$('#show3').click(function(){
     $('#mission1, #vission1').slideUp();
     $('#mteam').slideToggle();  
});

但是如果你能像这样改变标记

<button class="mission1">Mission</button>
<button class="vission1">Vision</button>
<button class="mteam">Management</button>

         <div class="mission1 common">Abcd</div>
         <div class="vission1 common">VVVVVVV</div>
         <div class="mteam common">MMMMMMMMM</div>

然后尝试此代码

$('button').on('click', function() {
  var current = this.className;
  $('div.common:visible').slideUp(function() {
    $('div.' + current).slideToggle();
  });
});

会更容易

Answer 2

thecodeparadox的答案非常好。但是你可以使用jQuery.data（）从button元素中获取div id。如果是这样，你必须这样做：

<button data-href="mission1">Mission</button>
var currentDivId = $('button').data('href');

然后尝试以下代码：

<button id="show1" data-href="mission1">Mission</button>
<button id="show2" data-href="vission1">Vision</button>
<button id="show3" data-href="mteam">Management</button>

<div id="mission1" class="demo">Abcd</div>
<div id="vission1" class="demo">VVVVVVV</div>
<div id="mteam" class="demo">MMMMMMMMM</div>

和JavaScript代码：

$('document').ready(function() {
    $('#show1, #show2, #show3').click( function() {
        var $div = $('#' + $(this).data('href'));
        $('.demo').not($div).hide();
        $div.slideToggle();
    });
});

通过单击按钮打开div并通过单击另一个按钮关闭相同的div

2 个答案: