У меня есть 3 параграфа текста на приветственном сообщении. Для устройств ниже определенной ширины мне нужно показать только первое и скрыть другие 2 кнопкой спуска вниз и показать другой текст.jQuery своп текст при открытии

У меня он работает отлично, но текст перед открытием читает «Открыть, чтобы читать больше», и я хочу, чтобы текст говорил «Закрыть, чтобы читать меньше», когда отображается текстовое содержимое.

Мой код ниже, я изучаю jQuery, поэтому я уверен, что есть намного лучший способ делать что-то, но, по крайней мере, я пытаюсь.

Я использую его, чтобы идентифицировать первый абзац, обернуть все остальные в поле, а затем добавить еще один для кнопки, которая использует сохраненный текст. Затем переключите панель открытой и закройте клики.

$('body.home .landing.left p:first').addClass('first'); 
if($(window).width() < 768) { 

    var open = "Open to read more"; 
    var close = "Close to read less"; 

    $('body.home .landing.left p').not('.first').wrapAll('<div class="more"></div>'); 

    $('body.home .landing.left .more').wrap('<div class="moreCont"></div>'); 

    $('.moreCont').append('<a class="viewMore">'+ open + '</a>'); 

    $('.moreCont a.viewMore').click(function() { 
     $('.moreCont .more').slideToggle(); 

    }); 
}

Кнопка a.viewMore является один текст, отображаемый на

источник

2015-06-24 Geoff

Пожалуйста, сделайте это с CSS и не Js ... – Dominik

Привет, Доминик, как вы думаете, используя: before {content: «Открыть, чтобы читать больше»} и просто переключать классы, изменяющие контент? – Geoff

Да, это было бы более семантическим и лучше управляемым. И я не уверен, что понимаю, но вы также можете переключать текст с помощью медиа-запросов. Js-прослушиватель при изменении размера браузера очень дорог, и я постараюсь избежать его – Dominik

Я хотел бы сделать это с минимальными JS, как это возможно. Просто потому, что точки останова мультимедиа уже встроены в CSS.

Я сделал вам очень простой рабочий пример. Я бы в конечном итоге, возможно, добавила кнопку с JS и проверила бы с CSS, если js доступен (js и no-js классы на html), прежде чем спрятать его в мобильном телефоне, чтобы у вас был резерв no-js, когда что-то пошло не так (или бог- запрет js выключен). Анимация также может быть добавлена.

Надеюсь, это поможет.

$('.js-toggle').on('click', function() { 
    var $main = $('main'); 
    var _isOpen = $main.hasClass('is-open'); 

    if(_isOpen) { 
     $main.removeClass('is-open'); 
     $(this).text('Open to read more') 
    } 
    else { 
     $main.addClass('is-open'); 
     $(this).text('Close to read less') 
    } 
});

CSS (составитель)

p { 
    display: none; 
} 
.is-open p { 
    display: block; 
} 
p:first-child { 
    display: block; 
} 
@media screen and (min-width: 786px) { 
    p { 
     display: block; 
    } 
    button { 
     display: none; 
    } 
}

CodePen

http://codepen.io/dominikwilkowski/pen/yNPxYd

источник

2015-06-25 00:09:39 Dominik

jQuery своп текст при открытии

ответ

CodePen

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