具有單獨切換的多個顯示/隱藏div

Question

我一直在嘗試創建應該在頁面加載時隱藏的多個div。 如果單擊相應的按鈕，應顯示div；如果再次單擊相同的按鈕，則應隱藏。 同樣，如果正在顯示一個div並單擊另一個按鈕，則應該顯示與該按鈕相對應的div。 如果再次單擊同一按鈕，則div應該隱藏。 我在SO上遵循了同樣的思路，並且能夠顯示與按鈕單擊相對應的div，但切換功能不起作用。

請找到小提琴：

 jQuery(function() { jQuery('.showSingle').click(function() { jQuery('.targetDiv').hide(); jQuery('#div' + $(this).attr('target')).show(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="buttons"> <a class="showSingle" target="1">Div 1</a> <a class="showSingle" target="2">Div 2</a> <a class="showSingle" target="3">Div 3</a> <a class="showSingle" target="4">Div 4</a> </div> <div id="div1" class="targetDiv">Lorum Ipsum1</div> <div id="div2" class="targetDiv">Lorum Ipsum2</div> <div id="div3" class="targetDiv">Lorum Ipsum3</div> <div id="div4" class="targetDiv">Lorum Ipsum4</div> 

https://jsfiddle.net/8pyovyqn/3/

任何幫助表示贊賞。

Answer 1

您可以使用toggle來實現所需的功能：

 jQuery(function(){ jQuery('.showSingle').click(function(){ var target = $(this).attr('target'); $('#div'+target).toggle('.hide'); }); }); 

 .targetDiv{ display: none; } .hide{ display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="buttons"> <a class="showSingle" target="1">Div 1</a> <a class="showSingle" target="2">Div 2</a> <a class="showSingle" target="3">Div 3</a> <a class="showSingle" target="4">Div 4</a> </div> <div id="div1" class="targetDiv">Lorum Ipsum1</div> <div id="div2" class="targetDiv">Lorum Ipsum2</div> <div id="div3" class="targetDiv">Lorum Ipsum3</div> <div id="div4" class="targetDiv">Lorum Ipsum4</div> 

Answer 2

嘗試下面的jQuery代碼，用您的jQuery代碼替換此代碼，並檢查其功能是否正常。 切換功能用於切換隱藏和顯示元素。

jQuery(function(){
    jQuery('.targetDiv').hide();
    jQuery('.showSingle').click(function(){              
          jQuery('#div'+$(this).attr('target')).toggle();
    });
});

Answer 3

首先，將所有div的display屬性設置為none：

<div class="buttons">    
    <a  class="showSingle" target="1">Div 1</a>
    <a  class="showSingle" target="2">Div 2</a>
    <a  class="showSingle" target="3">Div 3</a>
    <a  class="showSingle" target="4">Div 4</a>
</div>

<div id="div1" class="targetDiv" style="display:none;">Lorum Ipsum1</div>
<div id="div2" class="targetDiv" style="display:none;">Lorum Ipsum2</div>
<div id="div3" class="targetDiv" style="display:none;">Lorum Ipsum3</div>
<div id="div4" class="targetDiv" style="display:none;">Lorum Ipsum4</div>

然后像下面這樣切換div：

jQuery(function(){
       jQuery('.showSingle').click(function(){      
           $('.targetDiv').not('#div' + $(this).attr('target')).hide();        
           $('#div'+$(this).attr('target')).toggle();
       });
   });

您可以像下面的小提琴一樣實現此目的： https : //jsfiddle.net/8pyovyqn/28/

Answer 4

已經有這么多答案，但是我認為它們都不以@Pravin希望的方式工作。

所以這是我的建議：

jQuery(function(){
    jQuery('.showSingle').click(function(){
          var objdiv = $('#div'+$(this).attr('target'));
          var toggleDisplay = false;
          if(objdiv.css('display')=="none"){
                toggleDisplay = true;
          }
          jQuery('.targetDiv').hide();
          objdiv.toggle(toggleDisplay);
    });
});

在這里擺弄...

Answer 5

使用not隱藏所有內容（單擊的除外）並設置style="display:none;" 讓所有div默認隱藏它們。

 $(function() { $('.showSingle').click(function() { $('.targetDiv').not('#div' + $(this).attr('target')).hide(); $('#div' + $(this).attr('target')).toggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="buttons"> <a class="showSingle" target="1">Div 1</a> <a class="showSingle" target="2">Div 2</a> <a class="showSingle" target="3">Div 3</a> <a class="showSingle" target="4">Div 4</a> </div> <div id="div1" class="targetDiv" style="display:none;">Lorum Ipsum1</div> <div id="div2" class="targetDiv" style="display:none;">Lorum Ipsum2</div> <div id="div3" class="targetDiv" style="display:none;">Lorum Ipsum3</div> <div id="div4" class="targetDiv" style="display:none;">Lorum Ipsum4</div>