jquery slide toggle без разрыва строки

Я ищу слайд-переключатель jQuery для моего Joomla! веб-сайт, который будет работать как в this example: я хочу, чтобы моя статья начиналась с начала предложения, а затем (более-менее). Нажатие на кнопку (более подробно) скроет (больше) и покажет конец предложения (без прерывания строки или даже пробела). И в конце полного предложения - «близкая» ссылка.jquery slide toggle без разрыва строки

Для моей попытки я использовал трюк, чтобы обойти проблему, но она не работает (когда я нажимаю «начало предложения» вместо «(...)», то Google скрывает все содержимое моя статья 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 на следующее:

$('.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 slide toggle без разрыва строки

ответ

Смежные вопросы