我有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

你好多米尼克，你認爲使用a：before {content：「打開閱讀更多」}，只是切換類改變內容？ – Geoff

是的，這將是更多的語義和更好的管理。我不確定我是否理解，但您也可以使用媒體查詢切換文本。瀏覽器調整大小的js監聽器非常昂貴，我會盡量避免它 – Dominik

正在顯示的文本我會用盡可能少的js儘可能地做到這一點。只是因爲媒體斷點已經內置到CSS中。

我讓你成爲一個非常簡單的工作例子。如果js可用（js和no-js課程html），然後將它隱藏在手機中，那麼我最終可能會在JS中添加按鈕，並使用CSS進行檢查，以便在發生錯誤時（例如，禁止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

相關問題