Question

我最近发现了一些非常容易使用的Jquery代码，它基本上是切换和div可见且不可见。

代码正在处理第一个div - 但是假设我有多个具有相同结构的列表，我希望切换工作在特定的第二个或第三个div点击。

我想知道是否有可能将以下代码扩展为动态的。

有两个div的示例（只有第一个可用）：

<a id="toggle" href="javascript:void(0);">Expand box 1</a> 
<div id="content">Content 1</div> 
<div id="contentHidden" style="display:none;">Hidden 1</div>

<br><br>

<a id="toggle" href="javascript:void(0);">Expand box 2</a> 
<div id="content">Content 2</div> 
<div id="contentHidden" style="display:none;">Hidden 2</div>

Jquery的：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

$(function() // run after page loads 
{ 
  $("#toggle").click(function() 
  {  
    // hides matched elements if shown, shows if hidden 
    $("#content, #contentHidden").toggle(); 
  }); 
});

Answer 1

首先，每个DOM树对象上的Id应该是唯一的。（具有id =“toggle”的多个div最终会起作用但不推荐。在这种情况下首选class属性。）

对于你的问题我建议：

<a class="toggle" href="javascript:void(0);">Expand box 1</a> 
<div class="content">Content 1</div> 
<div class="contentHidden" style="display:none;">Hidden 1</div>

<br><br>

<a class="toggle" href="javascript:void(0);">Expand box 2</a> 
<div class="content">Content 2</div> 
<div class="contentHidden" style="display:none;">Hidden 2</div>

和jQuery代码：

$(function()
{
    $(".toggle").click(function() 
    {  
        // hides children divs if shown, shows if hidden 
        $(this).children("div").toggle(); 
    }); 
});

Answer 2

首先：您不能多次使用相同的ID（切换）。

<a class="toggle" href="#">Expand box 1</a> 
<div id="content">Content 1</div> 
<div id="contentHidden" style="display:none;">Hidden 1</div>

<br><br>

<a class="toggle" href="#">Expand box 2</a> 
<div id="content">Content 2</div> 
<div id="contentHidden" style="display:none;">Hidden 2</div>

$('.toggle').click(function() {
  var content = $(this).next();
  $(content).toggle();
  $(content).next().toggle(); // three lines above can also be done in a one-liner, but I prefer separate line for readability. In the end it's a matter of taste
  return false;
});

我已更改切换id到class，因为在页面上重复使用相同的ID无效HTML。 Id必须是唯一的。

.next()选择树中的下一个dom元素（姐妹）

Answer 3

id属性应该是唯一的。您需要将其更改为类：

$(function() // run after page loads 
{ 
  $(".toggle").click(function() 
  {  
    // hides matched elements if shown, shows if hidden 
    $(this).next().toggle(); 
    $(this).next().next().toggle(); 

    return false;
  }); 
});

<a class="toggle" href="javascript:void(0);">Expand box 1</a> 
<div>Content 1</div> 
<div style="display:none;">Hidden 1</div>

<br><br>

<a class="toggle" href="javascript:void(0);">Expand box 2</a> 
<div>Content 2</div> 
<div style="display:none;">Hidden 2</div>

Answer 4

所有你不能一次使用id的拳头：在这种情况下只有一个有效，因为事件只附加在第一个匹配的id上。

无论如何你可以这样做：（http://jsfiddle.net/7Kmny/）

<a class="toggle" href="javascript:void(0);">Expand box 1</a> 
<div id="content">Content 1</div> 
<div id="contentHidden" style="display:none;">Hidden 1</div>

<br><br>

<a class="toggle" href="javascript:void(0);">Expand box 2</a> 
<div id="content">Content 2</div> 
<div id="contentHidden" style="display:none;">Hidden 2</div>
  $(".toggle").click(function() 
  {  
    // hides matched elements if shown, shows if hidden 
    $(this).next().toggle();
    $(this).next().next().toggle();
  });

Answer 5

它仅适用于第一个div，因为id在页面上必须是唯一的。您应该使用类来处理多个标记。

<a class="toggle" href="javascript:void(0);">Expand box 1</a>
<div> 
<div class="content">Content 1</div> 
<div class="contentHidden" style="display:none;">Hidden 1</div>
</div>
<br><br>

<a class="toggle" href="javascript:void(0);">Expand box 2</a> 
<div>
<div class="content">Content 2</div> 
<div class="contentHidden" style="display:none;">Hidden 2</div>
</div>

Jquery的：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

$(function() // run after page loads 
{ 
  $(".toggle").click(function() 
  {  
    // hides matched elements if shown, shows if hidden 
    $(".content, .contentHidden", $(this).next()).toggle(); 
  }); 
});

Jquery切换 - 在多个div上展开/折叠

5 个答案: