Question

如何使用向下滑动时添加css'display：inline'并在使用时滑动时添加css'display：none'？我使用以下代码。

                echo '<br>';
                echo '<span>';
                echo '<div id="paris" style="width:380px;">';
                echo translate('paris top');
                echo '<div style="display: none;">';
                echo translate('paris top second');
                echo '</div>';
                echo '<a href="#" class="readmore_paris">';
                echo "...See More";
                echo '</a>';
                echo '</div>';

            $('.readmore_paris').click(function(e){
                 e.preventDefault();
                 $('#paris div').slideDown(function () {
                       $("#paris div").css({display: "inline"});
                 });
                 $('#paris div').slideUp(function () {
                       $("#paris div").css({display: "none"});
                 });
                  $(this).text( $(this).text() == '...See More' ? "Show Less" : "...See More");
             });

Answer 1

只需使用

$("#paris div").toggle();

它会显示和隐藏元素.....

Answer 2

这似乎做了你可能期待的事情。

$('.readmore_paris').click(function(e){
     e.preventDefault();
     $('#paris div').slideToggle();
     $(this).text( $(this).text() == '...See More' ? "Show Less" : "...See More");
});

http://jsfiddle.net/Aa6X6/

如果你需要显示div：inline，not block

$('.readmore_paris').click(function(e){
     e.preventDefault();
     $('#paris div').slideToggle(function () {
         if ($(this).is(':visible')){
             $(this).css({display: 'inline'});
         }
     });
     $(this).text( $(this).text() == '...See More' ? "Show Less" : "...See More");
});

http://jsfiddle.net/Aa6X6/2/

使用幻灯片切换时添加和删除css

2 个答案: