<div class="header-lang">
       <div class="lang-open-btn flex a-center">
            <img src="//cdn.myxypt.com/dd726de8/25/11/5a5581f09e286374fa3fb471f84a4a2abd8692ce.png" alt="en">
            <span class="flex a-center">EN<i></i></span>
       </div>
       <ul class="cm-drop-list-JS">
           <li><a href="#">EN</a></li>
           <li><a href="#">CN</a></li>
       </ul>
</div>


<div class="header-ss">
     <div class="ss_btn"></div>
     <div class="search-box">
          <form method="get" name="formsearch" action="{{ url_search}}" class="ss-search">
              <input type="text" name="wd" id="keyword" placeholder="">
          </form>
     </div>
</div>


<script>
    $(function() {
        $(".ss_btn").click(function () {
          $(".search-box").slideToggle();
        });
    });
</script>

<script>
    $(function() {
        $(".header-lang .lang-open-btn").on("click", function(e) {
            e.stopPropagation(); // 阻止冒泡，避免触发关闭

            var $parent = $(this).closest(".header-lang");
            var $list = $parent.find(".cm-drop-list-JS");

            // 关闭其他已展开的
            $(".cm-drop-list-JS").not($list).slideUp(300);
            $(".header-lang").not($parent).removeClass("open");

            // 切换当前
            $list.stop(true, true).slideToggle(300);
            $parent.toggleClass("open");
        });

        // 点击空白处关闭
        $(document).on("click", function() {
            $(".cm-drop-list-JS").slideUp(300);
            $(".header-lang").removeClass("open");
        });
    });
</script>

<style>
.header-lang{position:relative;margin-right:.5rem;height:.83rem;z-index:100}
.header-lang .lang-open-btn{overflow:hidden;position:relative;color:#fff;height:100%;cursor:pointer}
.header-lang .lang-open-btn span{margin-left:5px}
.header-lang .lang-open-btn i{display:block;margin-right:5px;transform:rotate(90deg);background:url(//cdn.myxypt.com/dd726de8/25/11/58f05348602a6d846ef929588932984ff47a932f.png) no-repeat center;width:16px;height:16px;transition:all .3s}
.header-lang.open .lang-open-btn i{background:url(//cdn.myxypt.com/dd726de8/25/11/58f05348602a6d846ef929588932984ff47a932f.png) no-repeat center;transform:rotate(-90deg)}
.header-lang>ul{display:none;position:absolute;left:50%;transform:translateX(-50%);top:100%;z-index:10;width:100px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,.1);text-align:center}
.header-lang>ul>li>a{display:block;font-size:14px;line-height:30px;color:#333;font-weight:400}
.header-lang>ul>li>a:hover{color:var(--demo-color)!important}
</style>