Question

我一直在尝试创建多个div，这些div应该在页面加载时隐藏。如果单击相应的按钮，则应显示div，如果再次单击相同的按钮，则应隐藏该div。此外，如果显示其中一个div并单击另一个按钮，则应显示与该按钮对应的div。如果再次单击相同的按钮，则div应隐藏。我在SO上跟踪了一个线程，并且能够显示与按钮点击相对应的div，但是切换功能不起作用。

请找小提琴：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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的显示属性设置为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);
    });
});

Fiddle here...

Answer 5

使用not隐藏除已点击的所有内容之外的所有内容，并为所有div设置style="display:none;"以默认隐藏它们。

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

多个显示/隐藏div，带有单独的切换

5 个答案: