Toogle максимизировать ширину и высоту div с помощью jquery

0

Привет, я хочу максимизировать и минимизировать div с помощью jquery. Я использую метод remove и add class, когда он максимизирует и сводит к минимуму. Но когда он уже максимизируется, он не будет минимизирован.

Здесь id мой код jquery:

$('.readmore').click(function (event) {
            event.preventDefault();
            $("#ry-new-content-3").animate({
                width : "+=460"
            },1000,function(){
                $('.more-content').slideDown('slow', function(){

                });
            });
            $(this).text($(this).text() == 'Read Less' ? 'Read More' : 'Read Less');

            if($(this).attr('class') == 'readmore') {
                $(this).removeClass();
                $(this).addClass('readless');
            }

         });

         $('.readless').click(function (event) {
            event.preventDefault();
            $('.more-content').slideUp('slow', function(){
                $("#ry-new-content-3").animate({
                    width : "-=460"
                },1000,function(){

                });
            });

         });

И это мой HTML-код:

<div id="ry-new-content-3">
        <div class="scrollable-area-page">
            <div class="summary-content">
                <p>
                    The original Master piece was designed by the now famous JMP design group, a California based golf Design Company that has also designed the renowned Rainbow Hills Club & Royal Jakarta courses both located in Jakarta, along with over 70 international standard courses worldwide.
                    Overall Royal Sumatra could easily be rated as one of the most challenging and interesting layouts in all of Indonesia. To pinpoint a special feature of the Royal Sumatra layout is to mention many unique and eye pleasing holes that are spread out amongst the private Modern living cluster style housing estates and still natural forest land.
                </p>
            </div>
            <div class="more-content" style="display:none;">
                <p>
                    One of the concepts in the design was to spread the 18 holes out throughout the 254 hectare estate to not only allow privacy & safety for golfers but add more beautiful golf course views for home owners. Combined with the tropically landscape & buzzing wildlife in our environment including breath taking crystal clear morning views of famous Bukit Barisan & Brestagi Mountains, Royal Sumatra Golf and Country Club provides the strategic test & beautiful environment that every golfer wants and few golf clubs can offer.  
                    A variety of unique features await the avid golfer. Strategy is required at all times. Fairways are generous in size to accommodate the beginner, however undulating and strategically located white sand bunkers, creeks and large lakes add a stern test for the avid golfer to say the least Likely the most challenging feature of this championship layout are the multi tiered and  sloped putting greens which consistently run at fast speeds, to be fair these are arguably the most challenging greens in all of South East Asia. 
                </p>

                <p>
                    A fleet of new Club Car Buggies and 140+ uniformed female caddies complete the golfers every need and with prices all inclusive approximately USD $70 on weekends and USD $55 on weekdays ( Golf, Caddy, Buggy) Royal Sumatra is well worth it for the Golf traveler looking to truly test his golf game without damaging the bank balance. 
                </p>
            </div>
        </div>
        <div class="readmore">
            Read More
        </div>
    </div>

Спасибо.

  • 0
    Если вы дважды нажмете на « Read *» , он снова изменится на « Read More», но класс div останется без чтения . И после этого остается бессрочным навсегда.
  • 0
    И кажется, что вы должны запустить событие, что ваш класс был изменен. Смотрите jQuery - событие Fire, если класс CSS изменился, и аналогичные Qs

1 ответ

1
Лучший ответ

Вы дали jQuerys Toggle попробовать? Я пробовал то же самое, что вы много раз, классная замена просто не стоит, как личное мнение, поэтому я закончил использовать переключатель или, если -statement. Например:

maximized = 500px
if($(".target").height() != maxmized){
   // maximize it
} else {
   // minimize it
}

Кроме того, не зная, как все это выглядит или идет, вы можете принять во внимание время анимации, если вы нажимаете слишком быстро или медленно, действие может не срабатывать, поэтому использование обратного вызова было бы хорошим.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню