Используя jQuery, когда пользователь нажимает на знак «плюс», я сдвигаю содержимое вниз и заменяю знак «плюс» знаком «минус» и перемещаю содержимое вверх.

Но очень громоздко!

Вот мой HTML

<div class="a">
<a href="#" id="toggle" class="show_hide">
    <img src="../plus.png" />
</a>

<div class="block-a" style="display: none">
Some that belongs to the belongs to block A
</div>
</div>

<br /><br />    

<div class="b">
<a href="#" id="toggle" class="show_hide">
    <img src="../plus.png" />
</a>

<div class="block-b" style="display: none">
Some that belongs to the belongs to block B
</div>    
</div> 

А вот и мой jQuery

$(document).ready(function(){

   $('.a .show_hide').toggle(function(){
       $(".a #toggle").find('img').attr('src', '../minus.png' );
       $(".a .block-a").slideDown();

   },function(){
       $(".a #toggle").find('img').attr('src', '../plus.png' );
       $(".a .block-a").slideUp();
   });

    $('.b .show_hide').toggle(function(){
       $(".b #toggle").find('img').attr('src', '../minus.png' );
       $(".b .block-b").slideDown();

   },function(){
       $(".b #toggle").find('img').attr('src', '../plus.png' );
       $(".b .block-b").slideUp();
   });

});

Как я могу перестать повторяться? Должен быть более чистый способ слайд-вверх и слайд-вниз Контента. Вот скрипка

Заранее благодарим!

Ура, воли

0
William 30 Май 2014 в 10:20

2 ответа

Лучший ответ

Есть много решений.

Один находится в этой скрипке

Мое решение - добавить ссылку в переключатель на то, что он должен показать / скрыть

<a href="#" class="show_hide" data-content='block-a'>

А затем используйте это значение в javascript

$('.' + $(this).attr('data-content')).slideDown();

Не по теме: вы не должны использовать один и тот же идентификатор для двух элементов, он должен быть уникальным. В моем примере я избавился от идентификатора

0
Community 20 Июн 2020 в 09:12

Посмотрите эту демонстрацию скрипта ,

$('.show_hide').toggle(function(){
       $(this).find('img').attr('src', 'http://besttravelagent.com/wp-content/themes/best-travel-agent/images/minus.png' );
       $(this).parent().find('div[class^="block"]').slideDown();

   },function(){
       $(this).find('img').attr('src', 'http://besttravelagent.com/wp-content/themes/best-travel-agent/images/plus.png' );
       $(this).parent().find('div[class^="block"]').slideUp()
});

Общая / обобщенная функция для обеих ссылок.

0
Shaunak D 30 Май 2014 в 06:41