jQuery顯示隱藏內容和更改鏈接

在我的公司頁面上，我想使用顯示和隱藏切換詳細信息，同時點擊鏈接。jQuery顯示隱藏內容和更改鏈接

我用.toggle（），但....

但這裏是次要的問題，而在用戶點擊顯示更多內容應該滑下去，更重要的這段文字「查看更多」應該是變化「顯示較少」並且應該切換。我希望你清楚我真的需要什麼。

感謝

2009-06-18 Wasim Shaikh

J翁麥科勒姆主要有你的答案，但你也可以讓使用JavaScript的簡寫，使您的代碼更緊湊：

$('#toggle').click(function(ev) { 
    $('#content').toggle(); 
    this.html(($('#toggle').text() == 'Show more') ? 'Show less' : 'Show more'); 
})

編輯：爲清楚起見，我還加了html標記，你需要以上代碼工作。在這個例子中，所有內容都以開頭顯示。

<p><a id="toggle" href="#">Show less</a></p> 
<div id="content"><!-- your stuff goes here. --></div>

如果你希望它被隱藏，開始時，你只需將鏈接文本改爲"Show more"並添加下面的樣式規則的樣式表：

#content { display: none; }

來源

2009-06-18 19:21:17

神奇的解決方案。在找到下面的Snipplr代碼片段後，我發現這個代碼片段更加簡潔，通過使上面的代碼成爲一個jQuery函數，您可以這樣調用它：element.toggleText（'first value'，'second value'）; http：// snipplr。com/view/8916/jquery-toggletext/ – 2010-10-15 02:16:17

您可以通過執行以下更改ID爲 '切換' 的鏈接的值：

HTML：

<a href="#" id="toggle">Show More</a>

的jQuery（您切換功能內）：

$('a#toggle').text('Show less');

來源

2009-06-18 19:00:01

你可以用jquery hide()和來隱藏和顯示元素功能，還有一個slideDown功能。

，這樣你就解僱像這樣的onclick

$("#showMore").click(function(){ 
    $("#showMore").hide(); 
    $("#showLess").show(); 
    $("#contentDiv").slideDown(); 
}

應該只是做到這一點，讓我知道，如果您有任何其他問題。

來源

2009-06-18 19:06:30

這應該這樣做...

HTML：

<a href="#" id="expand"> 
     <span class="linktext" >Show More</span> 
     <span class="linktext" style="display:none">Show Less 
     </span> 
    </a> 
    <div id="details" style="display:none"><h1>This is the details</h1></div>

的Javascript：

$('a#expand').click(function() { 
     $('div#details').slideToggle(); 
     $('span.linktext').toggle(); 
    });

來源

2009-06-18 19:17:12 orandov

創建切換函數來設置你的鏈接的文字和動畫的內容DIV

$('a.toggle').toggle( 
    function() { 
     $('#contentDiv').slideDown(); 
     $(this).html('Show less'); 
    }, 
    function() { 
     $('#contentDiv').slideUp(); 
     $(this).html('Show more'); 
    } 
);

來源

2009-06-18 19:19:05 palmsey

jQuery顯示隱藏內容和更改鏈接

回答

相關問題