Замена объектов HTML в jQuery

Question

У меня есть следующий html, который является тегом dl, содержащим тег dt, с классом переключения и содержит FAQ, а затем тег dd с классом расширения, который содержит ответ на часто задаваемые вопросы :

<dl> 
<dt class="toggle">&#9660; Here is a FAQ</dt> 
<dd class="expand"> 
    <p>And here is the answer</p> 
</dd> 
.... 
</dl> 

и следующие JQuery:

$(function() { 
    $('.expand').hide(); 

    $('.toggle').click(function() { 
     var $expand = $(this).next('.expand'); 
     if ($expand.is(':hidden')) { 
      $expand.slideDown(); 
     } else { 
      $expand.slideUp(); 
     } 
    }); 
}); 

Эта функция разворачивает или сворачивает в FAQ ответ.

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

Независимо от того, как я пытаюсь кодировать/использовать функции среза или подстроки, я до сих пор не смог этого добиться.

Любые комментарии оценены, но будьте добры, так как это мой первый пост.

Answer 1

Другим вариантом является просто полагаться на CSS, чтобы показать скрыть стрелки вверх и вниз.

$(".toggle").on("click", function() { 
 
    $(this).toggleClass("open"); 
 
});

.toggle { 
 
    cursor: pointer; 
 
} 
 

 
.toggle > span + span { 
 
    display : none; 
 
} 
 

 
.toggle.open > span { 
 
    display : none; 
 
} 
 

 
.toggle.open > span + span { 
 
    display : inline; 
 
} 
 

 
.toggle + dd.expand { display : none; } 
 
.toggle.open + dd.expand { display : block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<dl> 
 
<dt class="toggle"><span>&#9650</span><span>&#9660;</span> Here is a FAQ</dt> 
 
<dd class="expand"> 
 
    <p>And here is the answer</p> 
 
</dd> 
 
</dl>

Answer 2

Поместите стрелку внутри <i> тега, так что вы можете ориентировать его с помощью JQuery:

<dt class="toggle"><i>&#9660;</i> Here is a FAQ 1</dt> 

Пример:

$(function() { 
 

 
    $('.expand').hide(); 
 

 
    $('.toggle').click(function() { 
 
    var $expand = $(this).next('.expand'); 
 
    var isHidden = $expand.is(':hidden'); 
 
    $expand.slideToggle(); 
 
    $("i", this).html(isHidden? "▲" : "▼"); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<dl> 
 
    <dt class="toggle"><i>&#9660;</i> Here is a FAQ 1</dt> 
 
    <dd class="expand"> 
 
    <p>1 And here is the answer</p> 
 
    </dd> 
 
    <dt class="toggle"><i>&#9660;</i> Here is a FAQ 2</dt> 
 
    <dd class="expand"> 
 
    <p>2 And here is the answer</p> 
 
    </dd> 
 
    <dt class="toggle"><i>&#9660;</i> Here is a FAQ 3</dt> 
 
    <dd class="expand"> 
 
    <p>3 And here is the answer</p> 
 
    </dd> 
 
</dl>

Answer 3

Вы можете заменить на Unicode значение символа вместо объекта HTML.

Характер ▼ 9660 в десятичной форме и 25BC в шестнадцатеричном формате. Таким образом, его объект HTML является ▼, а его строковая форма JavaScript - "\u25BC".

То же самое касается ▲, которое равно 9650 в десятичной системе и 25B2 в шестнадцатеричном формате.

Таким образом, вы можете заменить назад и вперед в текстовых строках с:

.replace("\u25BC", "\u25B2"); 

Рабочий пример:

$(function() { 
 
    $('.expand').hide(); 
 

 
    $('.toggle').click(function() { 
 
     var $this = $(this); 
 
     var $expand = $this.next('.expand'); 
 
     if ($expand.is(':hidden')) { 
 
      $expand.slideDown(); 
 
      $this.text($this.text().replace("\u25BC", "\u25B2")); 
 
     } else { 
 
      $expand.slideUp(); 
 
      $this.text($this.text().replace("\u25B2", "\u25BC")); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<dl> 
 
<dt class="toggle">&#9660; Here is a FAQ</dt> 
 
<dd class="expand"> 
 
    <p>And here is the answer</p> 
 
</dd> 
 
.... 
 
</dl>