Аккордеон в jQuery

Question

Привет, я работаю на аккордеоне, я хотел бы узнать, есть ли более чистый способ переключения знаков «плюс» и «минус». Ниже приведен код и ссылка на прототип.

JQuery

$(".discount-wrapper h2").on("click", function() { 
    $(this).children('.plus-sign').toggle(); 
    $(this).parent().children(".discount-content-wrapper").toggle('slow'); 
    $(this).children('.minus-sign').toggle(); 
}); 

HTML

<div class="discount-wrapper"> 
    <h2>Accordion 3<i class="plus-sign">+</i><i class="minus-sign" style="display:none;">-</i></h2> 
    <div class="discount-content-wrapper"> 
     <p>My content is here</p> 
    </div> 
</div> 
<div class="discount-wrapper"> 
    <h2>Accordion 3<i class="plus-sign">+</i><i class="minus-sign" style="display:none;">-</i></h2> 
    <div class="discount-content-wrapper"> 
     <p>My content is here</p> 
    </div> 
</div> 

http://jsfiddle.net/

Answer 1

Я хотел бы сделать это с 1-я элемент элемента, а и просто переключать класс. Итак, по умолчанию у вас есть i-элемент без класса, который показывает знак плюса. Теперь, когда вы нажимаете на свой h2, вы просто переключаете знак класса minus (в этом случае знак плюса перезаписывается).

https://jsfiddle.net/2t3uyq4k/

$(".discount-wrapper h2").on("click", function() { 
    $(this).children('i').toggleClass('minus-sign'); 
    $(this).parent().children(".discount-content-wrapper").toggle('slow'); 
}); 

измененный HTML:

<div class="discount-wrapper"> 
    <h2>Accordion 3<i></i></h2> 
    <div class="discount-content-wrapper"> 
     <p>My content is here</p> 
    </div> 
</div> 
<div class="discount-wrapper"> 
    <h2>Accordion 3<i></i></h2> 
    <div class="discount-content-wrapper"> 
     <p>My content is here</p> 
    </div> 
</div> 

и CSS:

.discount-wrapper { 
    position:relative; 
    width: 100%; 
    background-color:#f3f3f3; 
    min-height:28px; 
    height: auto; 
} 

.discount-wrapper i:after { 
    content: '+'; 
} 

.discount-wrapper i.minus-sign:after { 
    content: '-'; 
} 

.discount-content-wrapper { 
    display: none; 
} 

Answer 2

Более уборщик appraoch будет

$(".discount-wrapper h2").on("click", function() { 
 
    $(this).children('.sign').text(function(i, t) { 
 
    return t.trim() == '+' ? '-' : '+' 
 
    }); 
 

 
    $(this).parent().children(".discount-content-wrapper").toggle('slow'); 
 
});

.discount-wrapper { 
 
    position: relative; 
 
    width: 100%; 
 
    background-color: #f3f3f3; 
 
    min-height: 28px; 
 
    height: auto; 
 
} 
 
.discount-content-wrapper { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="discount-wrapper"> 
 
    <h2>Accordion 3<i class="sign">+</i></h2> 
 
    <div class="discount-content-wrapper"> 
 
    <p>My content is here</p> 
 
    </div> 
 
</div> 
 
<div class="discount-wrapper"> 
 
    <h2>Accordion 3<i class="sign">+</i></h2> 
 
    <div class="discount-content-wrapper"> 
 
    <p>My content is here</p> 
 
    </div> 
 
</div>

---

Другой на основе CSS решение будет

$(".discount-wrapper h2").on("click", function() { 
 
    $(this).children('i').toggleClass('sign-plus sign-minus'); 
 

 
    $(this).parent().children(".discount-content-wrapper").toggle('slow'); 
 
});

.discount-wrapper { 
 
    position: relative; 
 
    width: 100%; 
 
    background-color: #f3f3f3; 
 
    min-height: 28px; 
 
    height: auto; 
 
} 
 
.discount-content-wrapper { 
 
    display: none; 
 
} 
 
.discount-wrapper .sign-plus:after { 
 
    content: '+' 
 
} 
 
.discount-wrapper .sign-minus:after { 
 
    content: '-' 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="discount-wrapper"> 
 
    <h2>Accordion 3<i class="sign-plus"></i></h2> 
 
    <div class="discount-content-wrapper"> 
 
    <p>My content is here</p> 
 
    </div> 
 
</div> 
 
<div class="discount-wrapper"> 
 
    <h2>Accordion 3<i class="sign-plus"></i></h2> 
 
    <div class="discount-content-wrapper"> 
 
    <p>My content is here</p> 
 
    </div> 
 
</div>