jquery - 将下拉列表中的箭头图标更改为我想要的任何图标

Question

我的网页上有一个下拉选择，我想将箭头图标更改为加号图标。单击并显示选项时，“加号”图标变为减号图标。我如何在 jquery 中编写代码。有人可以告诉我吗？我是 jquery 的新手，我想学习这门语言。我将提供我工作的示例代码。

        <form action="/action_page.php" class = "footer-dropdown">
            <fieldset>
              <select class = "select-div" name="template">
                <option active value="item1">관련사이트</option>
                <option value="item2">성신여자대학교</option>
                <option value="item3">성신여자대학교 평생교육원</option>
              </select>
            </fieldset>
        </form>

                    <!-- here is the code snippet of my dropdown menu-->

Answer 1

你可以使用 toggle class jquery 来做到这一点，非常简单。

$('.sel_par').click(function(){
  $(this).toggleClass('open');
});

.sel_par {
  position:relative;
  width: max-content;
}
.sel_par:after {
  content: '+';
  display:block;
  position:absolute;
  right: 10px;
  top: 0;
  bottom: 0;
  margin: auto;
  height: max-content;
}
.sel_par.open:after {
  content: '-';
  display:block;
  position:absolute;
  right: 10px;
  top: 0;
  bottom: 0;
  margin: auto;
  height: max-content;
}
.select-div {
  -webkit-appearance: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/action_page.php" class = "footer-dropdown">
    <fieldset>
      <div class="sel_par">
        <select class = "select-div" name="template">
          <option active value="item1">관련사이트</option>
          <option value="item2">성신여자대학교</option>
          <option value="item3">성신여자대학교 평생교육원</option>
        </select>
      </div>
    </fieldset>
</form>