jquery滑動切換沒有換行符

我正在爲我的Joomla尋找滑動切換jQuery！網站，將在this example工作：我希望我的文章從一個句子的開始，然後（閱讀更多）開始。點擊（閱讀更多）將隱藏（閱讀更多）並顯示句子的結尾（沒有換行符，甚至空格）。在完整句子結尾處，有一個「關閉」的鏈接。jquery滑動切換沒有換行符

對於我的嘗試，我使用了一個技巧來解決問題，但它不工作（當我點擊「開始的句子」而不是「（...）」toogle隱藏所有的內容我的Joomla文章（即便如此，它的工作here）

HTML：

<ul id="containertoggle"> 
    <li><a class="opener" style="text-decoration: none;"> <span style="color: #585858;">This is the begining of the sentence </span>(...)</a> 
     <div style="display: none;"> 
      <p>This is the beginning of the sentence and this is the end of the sentence </p> 
     </div></li> 
    <li><a class="opener" style="text-decoration: none;"> <span style="color: #585858;">This is the begining of the sentence </span>(...)</a> 
     <div style="display: none;"> 
      <p>This is the beginning of the sentence and this is the end of the sentence </p> 
     </div></li></ul>

QUERY

var $j = jQuery.noConflict(); 
$j(function() { 
$j('#containertoggle').on('click', 'a.opener', function() { 
    $j(this).next().toggle('slow').find('p').append('<span>[close]</span>'); 
    $j(this).hide(); 
}); 
$j('#containertoggle').on('click', 'span', function() { 
    $j(this).closest('div').toggle('slow').closest('li').find('a').show(); 
    $j(this).remove(); 
}); 
});

來源

2013-06-22 JinSnow

你可以試試這個腳本是非常簡單基本的腳本可能會有所幫助給你。

jsfiddle.net/nZyXJ/

來源

2013-06-25 04:06:48 steve

感謝您的幫助史蒂夫！是的，這非常有幫助！我試過你的代碼，它的工作正常，但我試圖解決你的代碼來獲取代碼，讓我顯示不同長度的「句首」（如替換var showChar = 100;通過「閱讀更多」句子），但沒有成功。當「句尾」出現時，我也試圖添加一種緩慢的切換效果，但它也沒有成功！ – JinSnow

你可以查看這個http://jsfiddle.net/nZyXJ/1/ – steve

我很抱歉，我讀了我的評論，而且根本不清楚。 var showChar = 100不能用於我的情況，因爲我有時需要在100個字符之後開始我的切換，但有時候它會是300.事實上，我甚至不知道字符的數量，因爲我將開始切換在句子中最好的地方，所以它可以在3個單詞之後或50個單詞之後。我無法預測切換的位置，所以jquery必須反映這種靈活性。再次，我很抱歉，我的壞。 – JinSnow

從史蒂夫上面的提琴是我用過的，直到我發現文本被以非常奇怪的方式被切斷。當您點擊「更多」鏈接時，文字顯示不正確。所有你需要做的就是將更多的功能更改爲以下內容：

$('.more').each(function() { 
    var content = $(this).html(); 
    if (content.length > showChar) { 
     var c = content.substr(0, showChar); 
     var h = content.substr(showChar, content.length - showChar); 
     var html = c + '<span class="moreelipses">' + ellipsestext + '</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>'; 
     $(this).html(html); 
    } 
});

我發佈這個答案只是因爲我無法發表評論。

事實上，我現在使用另一個腳本，從https://stackoverflow.com/a/11417877/3842368。我發現這個可以在多個實例中更好地工作。

來源

2014-12-30 11:27:26

jquery滑動切換沒有換行符

回答

相關問題