切換兄弟元素jquery的可見性

我在頁面上有幾個div。每個div都有一個標題，我可以點擊切換相應div的可見性。 div的默認設置爲display:none。切換兄弟元素jquery的可見性

我已經在每個div的點擊功能中使用了#ids，但是因爲我在同一頁面上有幾個div。我想單獨使用一個.class，這樣我就可以擁有一個單獨的類，從而控制可見性。

我猜我會需要使用.parent和.sibling類來做到這一點。

下面是我的代碼的摘錄： HTML：

<div> 
    <legend> 
     <a id="show_table" class="show_table" href="#"> 
      <span id="plus_minus"></span>Div 
     </a> 
    </legend> 
    <div class="toshow" id="toshow">Div to be shown</div> 
</div>

JS：

$('#show_table').click(function(){ 
    $("#toshow").slideToggle(); 
})

我想使這個更有效，讓我沒有做到這一點對於每個div使用#id s我想知道如何使用一個.class，可能是父母和兄弟姐妹來做到這一點。

作爲補充，我想在plus_minus範圍內具有減號/加號切換功能。我有同樣的工作使用個人ids。我將如何使用單個.class來實現此目標。我試圖使用下面：

$('.div_show').click(function(){ 

$(this).parent().next().slideToggle(); 

if($(this).parent().next().is(':visible'){ 

$(this).closest('span').find('plus_minus').text('+'); 

} 

else { 

$(this).closest('span').find('plus_minus').text('-'); 

} 


});

但它似乎不工作。

有關如何實現+/-切換功能的建議值得讚賞。

來源

2012-09-25 watkib

http://jsfiddle.net/vgguf/ –

爲什麼？因爲你正在使用的slideToggle更改到DOM不容易更新不試試這個

$('.show_table').click(function(){ 

    $(this).parent().next().slideToggle(); 

})

更新的代碼

。所以你必須處理在回調的知名度問題它的功能..

試試這個代碼

$('.show_table').click(function(){ 
     var $elem = $(this); 
     $(this).parent().next().slideToggle('slow', function() { 
      if($(this).is(':visible')){ 
      $elem.find('span').html('+'); 
      } 
      else{ 
      $elem.find('span').html('-'); 
      }    
     }); 
})

UPDATED FIDDLE

來源

2012-09-25 07:32:36

感謝這個工作，但是我不得不刪除''

在「傳奇」之後，因爲它是傳說之後的下一個兄弟。是否可以在'next（）'方法中傳遞一個變量，如'next（2）'，以便它遍歷到第二個下一個元素？ – watkib

你可以通過下一個（'div'）來選擇下一個div元素 –

謝謝，會試試看。請參閱編輯的問題加上減去'切換'功能。 – watkib

您可以使用.parent()得到legend元素，.next()得到以下的兄弟（這是你的div）：

$(".show_table").click(function() { 
    $(this).parent().next().slideToggle(); 
});

如果您的標記可能改變結構，你能做出這樣一個

$(".show_table").click(function() { 
    $(this).closest("div").find(".toshow").slideToggle(); 
});

這裏有一個：使用.closest()代替.parent()，然後使用.find()更靈活一點。

來源

2012-09-25 07:32:33

你可以試試這個

$('.show_table').on('click', function(){ 
    $(this).closest('div').find(".toshow").slideToggle(); 

}) ;

，或者你可以將一個類你的div容器的標題和DIV像

<div class='container'> 
    <legend> 
    <a id="show_table" class="show_table" href="#"> 
     <span id="plus_minus"></span>Div 
    </a> 
    </legend> 

    <div class = "toshow" id = "toshow" >Div to be shown</div> 

</div>

那麼你可以試試這個

$('.show_table').on('click', function(){ 
    $(this).closest('.container').find(".toshow").slideToggle(); 

}) ;

來源

2012-09-25 07:33:57

你可以試試這個：

$('.show_table').each(function(){ 
    $(this).parent().parent().find('.my-toggle-class').slideToggle(); 
});

來源

2012-09-25 07:34:27

這不起作用。父母是'legend'元素，並且toggle元素不是它的後代。 –

是的..謝謝..我已經改變了代碼 –

$('#show_table').click(function(){ 
    $(this).parent().parent().find("div.toshow").slideToggle(); 
});

來源

2012-09-25 07:37:02

切換兄弟元素jquery的可見性

回答

相關問題