Как сделать проверку if/else ширину блока в Jquery?

183
04 августа 2018, 12:10

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

$(document).on('click', '.title', function() {
        if (('.content_review .review_item').width() = 200) {
            $('.content_review .review_item').animate({
                width: '400'
            }, {
                duration: 500,
                specialEasing: {
                    width: 'linear'
                }
            });
         } else {
        $('.content_review .review_item').animate({
            width: '200'
        }, {
            duration: 500,
            specialEasing: {
                width: 'linear'
            }
        });
    }                    
    });



    <div class="content_review">
            <div class="title">
    <div class="title_icon">
        <svg class="svg_icon svg_comment">
            <use xlink:href="#icon-comment"></use>
        </svg>
    </div>
    <div class="title_name">Reviews</div>
</div>
    <a href="#comment" class="btn_add btn_add-top js_modal">
        <span class="icon icon_add">+</span>
        Add Comments
    </a>
<div class="review_wr">
    <div class="review_item positive">
        <div class="review_header">
            <div class="review_name">
                <span class="icon review_icon">
                    <svg class="svg_icon svg_user">
                        <use xlink:href="#icon-user"></use>
                    </svg>
                </span>
                Guest           </div>
                        <a href="/hyip/bpayment.biz" class="review_link">Bpayment.biz</a>
                        </div>
        <div class="review_body">
            <div class="review_text">Good company</div>
        </div>
    </div>
    <div class="review_item positive">
        <div class="review_header">
            <div class="review_name">
                <span class="icon review_icon">
                    <svg class="svg_icon svg_user">
                        <use xlink:href="#icon-user"></use>
                    </svg>
                </span>
                Guest           </div>
                    </div>
        <div class="review_body">
            <div class="review_text">Wow!</div>
        </div>
    </div>
Answer 1

HTML не менял

$(document).on('click', '.title', function() { 
    var review = $('.content_review .review_item'), 
        state = true,  
        width = 200; 
 
    if( review.hasClass('small') ) { 
      state = !state; 
      width = 400; 
    } 
 
    review.toggleClass("small", state); 
 
    $('.content_review .review_item').animate({ 
      width: width 
    }, 500);          
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 <div class="content_review"> 
            <div class="title"> 
    <div class="title_icon"> 
        <svg class="svg_icon svg_comment"> 
            <use xlink:href="#icon-comment"></use> 
        </svg> 
    </div> 
    <div class="title_name">Reviews</div> 
</div> 
    <a href="#comment" class="btn_add btn_add-top js_modal"> 
        <span class="icon icon_add">+</span> 
        Add Comments 
    </a> 
<div class="review_wr"> 
    <div class="review_item positive"> 
        <div class="review_header"> 
            <div class="review_name"> 
                <span class="icon review_icon"> 
                    <svg class="svg_icon svg_user"> 
                        <use xlink:href="#icon-user"></use> 
                    </svg> 
                </span> 
                Guest           </div> 
                        <a href="/hyip/bpayment.biz" class="review_link">Bpayment.biz</a> 
                        </div> 
        <div class="review_body"> 
            <div class="review_text">Good company</div> 
        </div> 
    </div> 
    <div class="review_item positive"> 
        <div class="review_header"> 
            <div class="review_name"> 
                <span class="icon review_icon"> 
                    <svg class="svg_icon svg_user"> 
                        <use xlink:href="#icon-user"></use> 
                    </svg> 
                </span> 
                Guest           </div> 
                    </div> 
        <div class="review_body"> 
            <div class="review_text">Wow!</div> 
        </div> 
    </div>

READ ALSO
Не работает iconContent

Не работает iconContent

Использую кастомные иконки для отображения точек на карте, для отображения использую objectManager, даже если я убираю свойство для кастомной иконки,...

218
Ошибка функции iqTest()

Ошибка функции iqTest()

В IQ тесте дается массив с числамиОдно из них отличается от других четностью/нечетностью

173
Зачем индексировать внешний / вторичный (foreign key) ключ в MySQL?

Зачем индексировать внешний / вторичный (foreign key) ключ в MySQL?

Есть понятие "ограничитель" в MySQLНапример, это первичный ключ (ключ должен быть уникален, поэтому каждый раз производится поиск "а не было...

216