如何隱藏/顯示全部具有相同班級的班次？

我有這樣的HTML代碼：如何隱藏/顯示全部具有相同班級的班次？

<p>Hello <span class="hide" style="display:none">there</span> jquery</p> 
<button class="toggle">Toggle</button> 
<p>Hello <span class="hide" style="display:none">You</span> jquery</p> 
<button class="toggle">Toggle</button>

有了這個jQuery的：

$('.toggle').toggle(
    function() { 
     $('.hide').show("slow");}, 
    function() {  
     $('.hide').hide("slow");} 
);

現在，你可以看到兩個按鈕具有相同的類，並且兩個跨度具有相同的類。我試圖在這裏實現的是，當我按下其中一個時，它應該隱藏/顯示它上面的跨度。

我知道了運行方式，現在在這個jsFiddle

任何想法？

在此先感謝

費德里科

來源

2011-11-09 Federico Giust

也許

$('button.toggle').click(function() { 
    $(this).prev('span').toggle(); 
});

來源

2011-11-09 15:54:50

太棒了！非常感謝！ –

設置跨度id屬性的唯一值，然後用$('#thatid')引用它（您設定的ID替換thatid）。

來源

2011-11-09 15:53:06 Tim

這應該做的伎倆：

$('.toggle').toggle(
    function() { 
     $(this).prev().find('.hide').show("slow");}, 
    function() {  
     $(this).prev().find('.hide').hide("slow");} 
);

來源

2011-11-09 15:53:35

$('.toggle').toggle(
    function() { 
     $(this).prev().show('slow'); 
    }, 
    function() { 
     $(this).prev().hide('slow'); 
    } 
);

來源

2011-11-09 15:53:55 James

謝謝大家的答案，我只是發現了另一種方式，是很多我需要的東西更好！ :)

這是我發現的代碼可能對別人有幫助。

// Andy Langton's show/hide/mini-accordion - updated 23/11/2009 
// Latest version @ http://andylangton.co.uk/jquery-show-hide 

// this tells jquery to run the function below once the DOM is ready 
$(document).ready(function() { 

// choose text for the show/hide link - can contain HTML (e.g. an image) 
var showText='Show'; 
var hideText='Hide'; 

// initialise the visibility check 
var is_visible = false; 

// append show/hide links to the element directly preceding the element with a class of "toggle" 
$('.toggle').prev().append(' (<a href="#" class="toggleLink">'+showText+'</a>)'); 

// hide all of the elements with a class of 'toggle' 
$('.toggle').hide(); 

// capture clicks on the toggle links 
$('a.toggleLink').click(function() { 

// switch visibility 
is_visible = !is_visible; 

// change the link depending on whether the element is shown or hidden 
$(this).html((!is_visible) ? showText : hideText); 

// toggle the display - uncomment the next line for a basic "accordion" style 
//$('.toggle').hide();$('a.toggleLink').html(showText); 
$(this).parent().next('.toggle').toggle('slow'); 

// return false so any link destination is not followed 
return false; 

}); 
});

然後簡單地以這種形式

<a href="#" class="toggleLink">Toggle</a> 
<span class="toggle" >there</span> 
<a href="#" class="toggleLink">Toggle</a> 
<span class="toggle" >You</span>

添加類切換到任何跨度使用HTML，DIV或標記，你要隱藏/顯示及添加類toggleLink父元素

你可以看到它在這裏工作jsFiddle

或在作者的網站

來源

2011-11-11 09:18:22

如何隱藏/顯示全部具有相同班級的班次？

回答

相關問題