jquery .siblings不起作用

Question

您好，我想当one #框打开时，其他#框关闭。

Html：

<div id="main">
    <div id="link">click</div><!--/*div*/-->
    <div id="box">content1</div><!--/*div*/-->
</div><!--/*div*/-->
<div id="main">
    <div id="link">click2</div><!--/*div*/-->
    <div id="box">content2</div><!--/*div*/-->
</div><!--/*div*/-->
<div id="main">
    <div id="link">click3</div><!--/*div*/-->
    <div id="box">content3</div><!--/*div*/-->
</div><!--/*div*/-->

Jquery：

<script type="text/javascript"> 
$(document).ready(function(){
$('#main #box').css('display', 'none')

$('#main #link').click(function() {
    $(this).next('#main #box').slideToggle('slow')
    .siblings('#main #box:visible').css('display', 'none');
    });
});
</script>

谢谢!

Answer 1

ID应该是每页只有一个。

你不应该重用"main“。

相反，可以这样做：

<div class="main">
   <div class="link">click</div><!--/*div*/-->
   <div class="box">content1</div><!--/*div*/-->
</div><!--/*div*/-->
<div class="main">
   <div class="link">click2</div><!--/*div*/-->
   <div class="box">content2</div><!--/*div*/-->
</div><!--/*div*/-->
<div class="main">
   <div class="link">click3</div><!--/*div*/-->
   <div class="box">content3</div><!--/*div*/-->
</div><!--/*div*/-->

然后，您可以像这样更改您的javascript：

$(document).ready(function(){
 $('.main .box').css('display', 'none')

 $('.main .link').click(function() {
   $(this).next('.box').slideToggle('slow')
   .siblings('.box:visible').css('display', 'none');
 });
});

请记住，您正在处理.box的兄弟对象，因此不需要再次指定.main。您实际上是在寻找main的兄弟，它们被称为class='box:visible'

我可能会建议，除非确实需要，否则可能不需要main类。相反，你的代码结构应该是这样的：

<div id='main'>
  <div>
     <div class="link">click</div><!--/*div*/-->
     <div class="box">content1</div><!--/*div*/-->
  </div>
  <div>
     <div class="link">click2</div><!--/*div*/-->
     <div class="box">content2</div><!--/*div*/-->
  </div>
  <div>
     <div class="link">click3</div><!--/*div*/-->
     <div class="box">content3</div><!--/*div*/-->
  </div>
</div>

然后，您的javascript (编辑)如下所示：

$(document).ready(function(){
   $('#main .box').css('display', 'none')

  $('#main .link').click(function() {
    // this will work, but the code below is smoother      
    // $('#main .box').css('display', 'none'); 
    $('#main .box').hide('slow'); // hide smoothly
    $(this).next('.box').slideToggle('slow');
  });
}); 

这样做的原因有两个。首先，it在DOM中的查找速度更快，并且它为文档提供了一种结构。因为不应该重用ID，所以页面上只有一个主元素。

但是，在看不到其余代码的情况下，我不能保证这将工作(或破坏)您的布局。

Answer 2

您需要使用类而不是ids。每页只能有一个唯一的id。

HTML：

<div class="main">
    <div class="link">click</div><!--/*div*/-->
    <div class="box">content1</div><!--/*div*/-->
</div><!--/*div*/-->
<div class="main">
    <div class="link">click2</div><!--/*div*/-->
    <div class="box">content2</div><!--/*div*/-->
</div><!--/*div*/-->
<div class="main">
    <div class="link">click3</div><!--/*div*/-->
    <div class="box">content3</div><!--/*div*/-->
</div><!--/*div*/-->

Jquery：

<script type="text/javascript"> 
$(document).ready(function(){
$('.main .box').css('display', 'none')

$('.main .link').click(function() {
    $(this).next('.main .box').slideToggle('slow')
    .siblings('.main .box:visible').css('display', 'none');
    });
});
</script>