JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="dropdown">
    <li>DropDown
<svg id="arrow" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g><path d="M 8.341,9.837c 0.005-0.006, 0.007-0.014, 0.012-0.020l 3.491-3.857c 0.195-0.217, 0.195-0.569,0-0.786 c-0.002-0.002-0.004-0.003-0.006-0.004C 11.748,5.065, 11.622,5, 11.482,5L 4.499,5 c-0.143,0-0.27,0.069-0.361,0.176L 4.136,5.174 c-0.195,0.217-0.195,0.569,0,0.786l 3.499,3.877C 7.83,10.054, 8.146,10.054, 8.341,9.837z"></path></g></svg>
<ul class="submenu">
    <li><a href="#">aaa</a></li>
    <li><a href="#">bbb</a></li>
</ul>

    </li>
</ul>

CSS

#arrow{
    width: 16px;
    height: 16px;
    fill: #fff;
    position: absolute;
    top: 15px;
    right:15px;
    -webkit-transition: all .15s linear;
    -moz-transition: all .15s linear;
    -o-transition: all .15s linear;
    transition: all .15s linear;
}
.dropdown li{
    list-style:none;
    position:relative;
}
.submenu{
    display:none;
}
.dropdown_toggle #arrow{
   	-webkit-transform: rotate(180deg);
	        transform: rotate(180deg);
}


/*
装飾
*/

.dropdown{
    width:80%;
    padding:0;
    background:#125;
    color:#fff;
}
.dropdown>li{
    padding:10px;
}
.submenu{
    background:#358;
    margin-top:10px;
    padding:0;
}
.submenu a{
    display:block;
    color:#fff;
    text-decoration:none;
    padding:10px;
}
.submenu a:hover{
    background:rgba(255,255,255,.1);
}

JavaScript

$(function(){
	$(".dropdown>li").on("mousedown", function(){
 $(this).toggleClass('dropdown_toggle').children('.submenu').slideToggle(200);
	});
});