可选标签列表默认折叠

public/app/palicanon/index1.php

@@ -120,6 +120,9 @@ require_once '../public/function.php';
 select#tag_category_index option {
     background-color: gray;
 }
+button.active {
+    background-color: gray;
+}
 </style>
 
 <?php
@@ -167,9 +170,9 @@ select#tag_category_index option {
             </div>
         </div>
     </div>
-    <div id='course_head_bar' style='flex:6;background-color:var(--tool-bg-color1);padding:0 10px 10px 10px;'>
+    <div id='course_head_bar' style='flex:6;padding:0 10px 10px 10px;'>
         <div class='index_inner '>
-            <div style='display:flex;justify-content: space-between;'>
+            <div style='display:flex;justify-content: space-between;display:none;'>
                 <div> </div>
                 <div style=''>
                     <select onchange='viewChanged(this)'>
@@ -196,13 +199,18 @@ select#tag_category_index option {
             <div id="select_bar" >
                 <div id="tag_selected"></div>
                 <div>
-                    <button onclick="tag_list_slide_toggle(this)">
-                        ⮝
-                    </button>
                 </div>
             </div>
             <div>
-                <div id="tag_list">
+                <div id="tag_list" style='display:none;'>
+                    <div id="tag_list_head" style="display:flex;justify-content: space-between;border-bottom: 1px solid var(--border-line-color);">
+                        <div style='width:20em;'>
+                            <input id="tag_input" type="input" placeholder="tag search" size="20">
+                        </div>
+                        <div>
+                            <button id="btn-tag_list_close" onclick='close_tag_list()'>X</button>
+                        </div>
+                    </div>
                     <div level="0" class="tag_others"></div>
                     <div level="1" class="tag_others"></div>
                     <div level="2" class="tag_others"></div>

public/app/palicanon/palicanon.js

@@ -442,7 +442,11 @@ function chapter_onclick(obj) {
     }
 
 }
+function close_tag_list(){
+    $("#tag_list").slideUp();
+    $("#btn-filter").removeClass("active");
 
+}
 function palicanon_render_chapter_row(chapter) {
 	let html = "";
 	let levelClass = "";
@@ -634,12 +638,14 @@ function tag_set(tag) {
 }
 
 function render_tag_list() {
-	$("#tag_list").slideDown();
+	//$("#tag_list").slideDown();
 
 	let strListTag="";// = gLocal.gui.selected + "：";
+    strListTag += "<button id='btn-filter' onclick=\"tag_list_slide_toggle(this)\">"
     strListTag += "<svg class='icon' style='fill: var(--box-bg-color1)'>";
     strListTag += "<use xlink:href='../../node_modules/bootstrap-icons/bootstrap-icons.svg#filter'>";
     strListTag += "</svg>" ;
+    strListTag += "</button>"
 	for (const iterator of list_tag) {
 		strListTag += '<tag>';
         strListTag += "<svg class='small_icon' style='fill: var(--box-bg-color1)'>";
@@ -648,10 +654,9 @@ function render_tag_list() {
         strListTag += '<span class="textt" title="' + iterator + '">' + tag_get_local_word(iterator) + "</span>";
 		strListTag += '<span class="tag-delete" onclick ="tag_remove(\'' + iterator + "')\">✕</span></tag>";
 	}
-	strListTag +=
-		"<div style='display:inline-block;width:20em;'>" +
-		"<input id='tag_input' type='input' placeholder='tag' size='20'  />" +
-		"</div>";
+	strListTag +="<div style='display:inline-block;width:20em;'>";
+	//strListTag +="<input id='tag_input' type='input' placeholder='tag' size='20'  />";
+	strListTag +="</div>";
 	$("#tag_selected").html(strListTag);
 }
 
@@ -670,10 +675,10 @@ function sortNumber(a, b) {
 }
 
 function tag_list_slide_toggle(element) {
-	if ($(element).html().indexOf("⮟") != -1) {
-		$(element).html("⮝");
+	if ($("#tag_list").css("display") == 'none') {
+		$(element).addClass("active");
 	} else {
-		$(element).html("⮟");
+		$(element).removeClass("active");
 	}
 	$("#tag_list").slideToggle();
 }