繁体   English   中英

使用jQuery来最大化宽度和高度div

[英]Toogle maximize width and height div using jquery

您好,我想使用jquery最大化和最小化div 当最大化和最小化时,我使用remove和add类方法。 但是,当它已经最大化时,它不会最小化。

这是我的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>

谢谢。

您是否尝试过jQuerys Toggle 我已经尝试了很多次相同的事情,就个人观点而言,类交换只是不值得的,所以我结束了使用切换或if -statement。 例如:

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

另外,在不知道其外观如何的情况下 ,您可能需要考虑动画时间,如果单击得太快或太慢,动作可能不会开始,因此使用回调将是不错的选择。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM