Question

嗨我想要当#box打开时其他人#box关闭。

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。你基本上是在寻找名为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');
  });
});

原因是双重的。其一，ID在DOM中更快找到，它为您的文档提供了一个结构。因为您不应该重复使用ID，所以您的页面上只有一个主要元素。

但是，如果没有看到您的其余代码，我无法保证这将有效（或打破）您的布局。

Answer 2

您需要使用类而不是ID。每页只能有一个唯一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>

jquery .siblings不起作用

2 个答案: