1

1）ミッション、2）ビジョン、3）管理の3つのボタンがあるページを作成しています

ここでの機能は1でなければなりません。ミッションボタンをクリックすると、別のdiv（＃mission1）が開きます。

2.ビジョンボタンをクリックすると、別のdiv（＃vision1）が＃mission1 divと同じ位置で開き、＃mission1と#mteamdivも閉じます。

  1. 管理ボタンをクリックすると、別のdiv（#mteam）が＃mission1と＃vision1 divの同じ位置で開き、＃mission1、＃vision1divも閉じます。などを連続して

次のスクリプトをコーディングしました

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

デモを見る

私はそれをしましたが、私は非表示の問題だけの問題に直面しています。私の隠蔽は、同じボタンをクリックした後でのみ操作されますが、他のボタンはクリックされません。

どうすればいいのか教えてください。よろしくお願いします

4

2 に答える 2

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();
  });
});

もっと簡単だろう

于 2012-05-25T08:31:12.877 に答える
0

thecodeparadox の回答は非常に優れています。ただし、jQuery.data() を使用して、ボタン要素から 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();
    });
});
于 2012-05-25T08:58:25.250 に答える