jquery - Changing The Arrow Icon In Dropdown To any Icon I want

Question

I have a dropdown select on my webpage and i WANT to change the arrow icon into a plus icon. When clicked and the choices show, the "plus" icon turns into a minus icon. How do I code that in jquery. Can someone tell me? I am new in jquery and I want to learn this language. I'll provide a sample code of my work.

        <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">성신여자대학교 평생교육원&lt;/option>
              </select>
            </fieldset>
        </form>

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

标签： jqueryhtmlcss

Answer 1

您可以使用切换类 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">성신여자대학교 평생교육원&lt;/option>
        </select>
      </div>
    </fieldset>
</form>