如何在不丢失格式的情况下实现 sql 的代码折叠/折叠答案

【问题标题】：How to achieve code folding / collapsing for a sql without losing the formatting如何在不丢失格式的情况下实现 sql 的代码折叠/折叠
【发布时间】：2019-09-05 09:39:41
【问题描述】：

我有一个 sql 代码，我需要在特定的 sql 子句（如 SELECT、WHERE、FROM）处折叠/折叠代码。在鼠标点击/悬停时，需要显示其余的 sql。

我尝试了可折叠和其他一些功能，但是当我将特定的 sql 子句设置为可折叠时，我失去了格式，它会自动向左对齐。没有帮助。

我对此很陌生，因此对如何继续前进没有太多想法。非常感谢任何帮助。

HTML 可折叠、引导可折叠、HTML 详细信息和摘要标签。

SELECT /* collapse here*/ column1
    ,column2
FROM /* collapse here*/ table1 
    ,table2 
    ,(
        SELECT /* collapse here*/ column1
        FROM dual
        ) table3
WHERE /* collapse here*/
    table1.col1 = table2.col1
    AND table2.col2 = table3.col1

SQL 代码应该具有与 Javascript 代码折叠类似的功能，我们可以根据需要最小化和扩展。

【问题讨论】：

标签： javascript html

【解决方案1】：

你可以这样，这里我只是拿了按钮，但你可以使用 + 和 - 号代替它。

	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	.collapsible {
	  background-color: #777;
	  color: white;
	  cursor: pointer;
	  padding: 18px;
	  width: 100%;
	  border: none;
	  text-align: left;
	  outline: none;
	  font-size: 15px;
	}

	.active, .collapsible:hover {
	  background-color: #555;
	}

	.content {
	  padding: 0 18px;
	  display: none;
	  overflow: hidden;
	  background-color: #f1f1f1;
	}
	</style>
	</head>
	<body>

	<h2>Collapsibles</h2>

	<p>A Collapsible:</p>
	<button class="collapsible">SELECT</button>
	<div class="content">
	  <p>
		   column1
		,column2
	</p></div>

	<button class="collapsible">FROM</button>
	<div class="content">
	  <p>
	  table1 
		,table2 
		,(
			SELECT  column1
			FROM dual
			) table3
			
	</p></div>

	<button class="collapsible">WHERE</button>
	<div class="content">
	  <p> 
		table1.col1 = table2.col1
		AND table2.col2 = table3.col1
	  </p>
	</div>


	<script>
	var coll = document.getElementsByClassName("collapsible");
	var i;

	for (i = 0; i < coll.length; i++) {
	  coll[i].addEventListener("click", function() {
		this.classList.toggle("active");
		var content = this.nextElementSibling;
		if (content.style.display === "block") {
		  content.style.display = "none";
		} else {
		  content.style.display = "block";
		}
	  });
	}
	</script>

	</body>
	</html>

希望这会对你有所帮助。

【讨论】：

谢谢。我遇到的主要问题是对齐。默认情况下，它与中心对齐。我希望它保留来自 sql 代码的原始对齐方式。