幻燈片放映/隱藏鏈接上的內容點擊

我試圖找到我想要做的解決方案，但沒有完全匹配。最近我發現了一個標籤手風琴。準確地說，我有一個包含鏈接的水平菜單，當點擊鏈接時，會在鏈接行下方顯示具有良好下滑動畫的額外內容，並在單擊相同鏈接時向上滑動（剩餘頁面內容在隱藏的內容被揭示，這是我想要的）。幻燈片放映/隱藏鏈接上的內容點擊

問題是，當其他鏈接被點擊時，它們也會顯示額外的內容，但前一次點擊的內容仍然可見。我希望較早的內容在新內容向下滑動之前滑動。這是可能的，如果是這樣，我該如何去完成它？

這裏是我的代碼：

$(document).ready(function() { 
    // hides the menu as soon as the DOM is ready 
    $('#about').hide(); 
    $('#search').hide(); 
    $('#pages').hide(); 
    $('#links').hide(); 
    // toggles the menu on clicking the noted link 
    $('#toggleabout').click(function() { 
     $('#about').slideToggle(400); 
     return false; 
    }); 

    $('#togglesearch').click(function() { 
     $('#search').slideToggle(400); 
     return false; 
    }); 

    $('#togglepages').click(function() { 
     $('#pages').slideToggle(400); 
     return false; 
    }); 

    $('#togglelinks').click(function() { 
     $('#links').slideToggle(400); 
     return false; 
    }); 
});

來源

2011-11-28 Sovereign Anarchei

這應該是一個簡單的調用

$(".your-element-class").slideUp();

調用了slideDown就下單前關閉所有元素。但是，如果您遇到更多麻煩，請張貼一些代碼並/或改進您遇到的具體問題的描述。

來源

2011-11-28 08:05:26 Godwin

我已經發布我目前使用的代碼。我嘗試了你的方法，但它似乎只會在已經隱藏的內容上滑動，它忽略了對slideDown的調用。也許我做錯了什麼？ –

忽略我剛纔所說的，會發生什麼，它會卡在slideUp/slideDown'循環中，不知道如何解釋它。 –

@Sovereign Anarchei，根據你的代碼來看看這個jsfiddle：http://jsfiddle.net/Lcx88/。我爲每個可以隱藏的元素添加了一個類，並且當我單擊另一個元素時隱藏（滑動）了它們，然後我調用了slideToggle（）（真的，您可以在此處調用slideDown） – Godwin

你可以把你的其他可滑動連接的陣列中。現在，當用戶點擊鏈接時，請檢查您的數組以確保其他鏈接已摺疊。

來源

2011-11-28 08:05:13

試着這麼做，我不知道你是怎麼確定的子菜單的，但我只挑了A的ID，並把-navcontent子菜單的ID後：

$("#mynav li a").click(function(e){ 
    e.preventDefault(); // Prevent jumping to top of page 
    $("[id$='-navcontent']").slideUp(); // Slide up all other -navcontent elements 
    $("#" + $(this).attr("id") + "-navcontent").slideToggle(); // Slidedown the current -navcontent element 
});

有關$=更多信息可以在這裏找到：http://api.jquery.com/category/selectors/

$(document).ready(function() { 
// hides the menu as soon as the DOM is ready 
$('#about, #search, #pages, #links').hide(); 

// toggles the menu on clicking the noted link 
    $("#mynav input:button").click(function(e){ 

    e.preventDefault(); // Prevent jumping to top of page 
    var id = $(this).attr("id").replace("toggle", ""); 

    $("#mynav input:button").each(function(){ // Slide up all elements which are visible 
     var innerID = $(this).attr("id").replace("toggle", ""); 
     if(id == innerID) return; // Prevent current item to slideUp and slideDown directly after eachother, if is currentItem, only hide. 
     $("#" + innerID).slideUp(); 
    }); 
    $("#" + id).slideToggle(); // Slidedown the current -navcontent element 
}); 

});

現場演示：http://jsfiddle.net/Lcx88/2/

來源

2011-11-28 08:09:47 Niels

我已經發布了我目前使用的代碼。我嘗試了你的方法，並且理解它在理論上應該如何工作，但實際上在我點擊鏈接時沒有發生任何事情。也許我做錯了什麼？ –

我做出這個功能的方式是相反的。你在名稱前面加上了'toggle'的鏈接，在那裏我添加了一部分到被切換的DIV的ID。我更新了我的代碼。您必須將'#mynav li a'更改爲您正在使用的任何結構。 – Niels

我嘗試了不同的方式，並得到了我以後的效果，感謝您的幫助，雖然，我很感激。 –

幻燈片放映/隱藏鏈接上的內容點擊

回答

相關問題