jquery .siblings不工作

嗨，我希望當一個#box打開其他#box關閉。jquery .siblings不工作

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>

謝謝！

來源

2010-05-07 Mango

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，因此您的網頁上只能有一個主要元素。

但是，如果沒有看到代碼的其餘部分，我不能保證這會工作（或中斷）您的佈局。

來源

2010-05-07 14:09:56 Armstrongest

非常感謝，這是有道理的。爲什麼如果我在http://jsfiddle.net/中測試不起作用？ – Mango 2010-05-07 14:32:28

我現在編輯了JS，看到你正在嘗試做什麼。 – Armstrongest 2010-05-07 14:54:07

您需要使用類而不是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>

來源

2010-05-07 14:08:38

jquery .siblings不工作

回答

相關問題