2023年5月7日 06:30:31go评论68阅读模式

英文:

How to make a clickable vertical accordion?

问题

I am making a website for my master's course, and I wanted to make a vertical clickable accordion mechanism. The ideia is to click in every section and it expands with more information.
So far, I've just made it with the hover mechanism using CSS. How can I make it clickable and use JS? If someone could help me, I would really appreciate it.

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
}
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul {
  display: flex;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}
li {
  overflow-y: scroll;
  overflow: auto;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 8.3vw;
  height: calc(100% - 1%);
  -webkit-transition: -webkit-box-flex 500ms ease-out;
  -webkit-transition: -webkit-flex 500ms ease-out;
  transition: -webkit-box-flex 500ms ease-out;
  transition: -ms-flex 500ms ease-out;
  transition: flex 500ms ease-out;
  padding: 20px;
  -webkit-box-shadow: 2px 0px 4px -1px rgba(0, 0, 0, 0.66);
  -moz-box-shadow: 2px 0px 4px -1px rgba(0, 0, 0, 0.66);
  box-shadow: 2px 0px 4px -1px rgba(0, 0, 0, 0.66);
}
li:hover {
  -webkit-box-flex: 30vw;
  -webkit-flex: 30vw;
  -ms-flex: 30vw;
  flex: 30vw;
}
.projects {
  width: 30vw;
  height: auto;
  margin-bottom: 5vh;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title> MDC 22-23 </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <ul>
    <!-- MICRO-1-->
    <li>
      <div class="projects ">
        <a href="matilde/matilde.html ">
          <div class="maintitle "> Networked Infrastructures</div>
          <div class="subtitle "> Three geographies (environmental, economic, political)</div>
          <img src="gif5.gif "></div>
        </a>
      </div>

      <div class="projects "></div>
      <a href="matilde/matilde.html ">
        <div class="maintitle "> Networked Infrastructures</div>
        <div class="subtitle "> Three geographies (environmental, economic, political)</div>
        <img src="gif5.gif "></div>
      </a>
    </div>

    <div class="projects "></div>
    <a href="matilde/matilde.html ">
      <div class="maintitle "> Networked Infrastructures</div>
      <div class="subtitle "> Three geographies (environmental, economic, political)</div>
      <img src="gif5.gif "></div>
    </a>
  </div>

  </li>

  <!-- PROJECT 2-->

  <li>
    <div class="projects ">
      <a href="matilde/matilde.html ">
        <div class="maintitle "> Networked Infrastructures</div>
        <div class="subtitle "> Three geographies (environmental, economic, political)</div>
        <img src="gif5.gif "></div>
      </a>
    </div>

    <div class="projects "></div>
    <a href="matilde/matilde.html ">
      <div class="maintitle "> Networked Infrastructures</div>
      <div class="subtitle "> Three geographies (environmental, economic, political)</div>
      <img src="gif5.gif "></div>
    </a>
  </div>

  <div class="projects "></div>
  <a href="matilde/matilde.html ">
    <div class="maintitle "> Networked Infrastructures</div>
    <div class="subtitle "> Three geographies (environmental, economic, political)</div>
    <img src="gif5.gif "></div>
  </a>
</div>
</li>

<!-- PROJECT 3 -->
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</body>
</html>

英文:

I am making a website for my master's course, and I wanted to make a vertical clickable accordion mechanism. The ideia is to click in every <il> section and it expands with more information.
So far, I've just made it with the hover mechanism using CSS. How can I make it clickable and use JS? If someone could help me, I would really appreciate it.

body {
width  : 100vw;
height : 100vh;
margin : 0;
}
ul,
li {
margin     : 0;
padding    : 0;
list-style : none;
}
ul {
display  : flex;
overflow : hidden;
height   : 100vh;
width    : 100vw;
}
li {
overflow-y         : scroll;
overflow           : auto;
-webkit-box-flex   : 1;
-webkit-flex       : 1;
-ms-flex           : 1;
flex               : 1;
width              : 8.3vw;
height             : calc(100% - 1%);
-webkit-transition : -webkit-box-flex 500ms ease-out;
-webkit-transition : -webkit-flex 500ms ease-out;
transition         : -webkit-box-flex 500ms ease-out;
transition         : -ms-flex 500ms ease-out;
transition         : flex 500ms ease-out;
padding            : 20px;
-webkit-box-shadow : 2px 0px 4px -1px rgba(0, 0, 0, 0.66);
-moz-box-shadow    : 2px 0px 4px -1px rgba(0, 0, 0, 0.66);
box-shadow         : 2px 0px 4px -1px rgba(0, 0, 0, 0.66);
}
li:hover {
-webkit-box-flex : 30vw;
-webkit-flex     : 30vw;
-ms-flex         : 30vw;
flex             : 30vw;
}
.projects {
width         : 30vw;
height        : auto;
margin-bottom : 5vh;
}
/* ------- PARAGRAPH STYLES ------- */
a {
text-decoration : none;
color           : black;
}
a:hover {
opacity : 0.5;
}
.maintitle {
width          : 100%;
font-size      : 30px;
text-transform : uppercase;
font-family    : Arial, Helvetica, sans-serif;
}
.subtitle {
width       : 150vw;
font-size   : 20px;
font-family : Arial, Helvetica, sans-serif;
}
img {
padding-top : 20px;
width       : 25vh;
height      : auto;
}

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;title&gt; MDC 22-23 &lt;/title&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;ul&gt;
&lt;!-- MICRO-1--&gt;
&lt;li &quot;&gt;
&lt;div class=&quot;projects &quot;&gt;
&lt;a href=&quot;matilde/matilde.html &quot;&gt;
&lt;div class=&quot;maintitle &quot;&gt; Networked Infrastructures&lt;/div&gt;
&lt;div class=&quot;subtitle &quot;&gt; Three geographies (environmental, economic, political)&lt;/div&gt;
&lt;img src=&quot;gif5.gif &quot;&gt;&lt;/div&gt; 
&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;projects &quot;&gt;&lt;/div&gt;
&lt;a href=&quot;matilde/matilde.html &quot;&gt;
&lt;div class=&quot;maintitle &quot;&gt; Networked Infrastructures&lt;/div&gt;
&lt;div class=&quot;subtitle &quot;&gt; Three geographies (environmental, economic, political)&lt;/div&gt;
&lt;img src=&quot;gif5.gif &quot;&gt;&lt;/div&gt; 
&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;projects &quot;&gt;&lt;/div&gt;
&lt;a href=&quot;matilde/matilde.html &quot;&gt;
&lt;div class=&quot;maintitle &quot;&gt; Networked Infrastructures&lt;/div&gt;
&lt;div class=&quot;subtitle &quot;&gt; Three geographies (environmental, economic, political)&lt;/div&gt;
&lt;img src=&quot;gif5.gif &quot;&gt;&lt;/div&gt; 
&lt;/a&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;!-- PROJECT 2--&gt;
&lt;li&gt;
&lt;div class=&quot;projects &quot;&gt;
&lt;a href=&quot;matilde/matilde.html &quot;&gt;
&lt;div class=&quot;maintitle &quot;&gt; Networked Infrastructures&lt;/div&gt;
&lt;div class=&quot;subtitle &quot;&gt; Three geographies (environmental, economic, political)&lt;/div&gt;
&lt;img src=&quot;gif5.gif &quot;&gt;&lt;/div&gt; 
&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;projects &quot;&gt;&lt;/div&gt;
&lt;a href=&quot;matilde/matilde.html &quot;&gt;
&lt;div class=&quot;maintitle &quot;&gt; Networked Infrastructures&lt;/div&gt;
&lt;div class=&quot;subtitle &quot;&gt; Three geographies (environmental, economic, political)&lt;/div&gt;
&lt;img src=&quot;gif5.gif &quot;&gt;&lt;/div&gt; 
&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;projects &quot;&gt;&lt;/div&gt;
&lt;a href=&quot;matilde/matilde.html &quot;&gt;
&lt;div class=&quot;maintitle &quot;&gt; Networked Infrastructures&lt;/div&gt;
&lt;div class=&quot;subtitle &quot;&gt; Three geographies (environmental, economic, political)&lt;/div&gt;
&lt;img src=&quot;gif5.gif &quot;&gt;&lt;/div&gt; 
&lt;/a&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;!-- PROJECT 3 --&gt;
&lt;li&gt;3&lt;/li&gt;
&lt;li&gt;4&lt;/li&gt;
&lt;li&gt;5&lt;/li&gt;
&lt;li&gt;6&lt;/li&gt;
&lt;li&gt;7&lt;/li&gt;
&lt;li&gt;8&lt;/li&gt;
&lt;li&gt;9&lt;/li&gt;
&lt;li&gt;10&lt;/li&gt;
&lt;li&gt;11&lt;/li&gt;
&lt;li&gt;12&lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;

So far, I've just made it with the hover mechanism using CSS. How can I make it clickable and use JS? Also could i make every <il> with infinite auto scroll? If someone could help me, I would really appreciate it.

答案1

得分: 1

我认为这应该可以工作。基本上，我只是用 li.selected 替换了你的 li:hover 选择器。现在它只是使用一些简单的 JS 在点击 <li> 标签时添加/移除 selected 类。

注意：我纠正了上面评论中提到的相当多的语法错误。我还移除了所有那些 -webkit-、-moz- 和 -ms- 前缀的项，因为这些基本上不再需要。

const listItems = document.querySelectorAll("li");

for (let i = 0; i &lt; listItems.length; i++) {
  listItems[i].addEventListener("click", () =&gt; {
    unselectAll()
    listItems[i].classList.add("selected");
  }, false);
};

function unselectAll(){
  for (let i = 0; i &lt; listItems.length; i++) {
    listItems[i].classList.remove("selected");
  };
}

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul {
  display: flex;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

li {
  overflow-y: scroll;
  overflow: auto;
  flex: 1;
  width: 8.3vw;
  height: calc(100% - 1%);
  transition: flex 500ms ease-out;
  padding: 20px;
  box-shadow: 2px 0px 4px -1px rgba(0, 0, 0, 0.66);
}

li.selected {
  flex: 30vw;
}

.projects {
  width: 30vw;
  height: auto;
  margin-bottom: 5vh;
}

/* 其他 CSS 样式省略 */

<ul>
  <!-- 省略部分 -->
</ul>

英文:

I think this should work. Basically I have just replaced your li:hover selector with li.selected. Now it just uses some simple JS to add/remove that selected class when you click on an <li> tag.

NOTE: I dorrected quite a few syntax errors that commentors above have mentioned. I also removed all of those -webkit-, -moz- and -ms- prefixed items as those are largely no longer needed.

const listItems = document.querySelectorAll(&quot;li&quot;);
for (let i = 0; i &lt; listItems.length; i++) {
listItems[i].addEventListener(&quot;click&quot;, () =&gt; {
unselectAll()
listItems[i].classList.add(&quot;selected&quot;);
}, false);
};
function unselectAll(){
for (let i = 0; i &lt; listItems.length; i++) {
listItems[i].classList.remove(&quot;selected&quot;);
};
}

body {
width: 100vw;
height: 100vh;
margin: 0;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
display: flex;
overflow: hidden;
height: 100vh;
width: 100vw;
}
li {
overflow-y: scroll;
overflow: auto;
flex: 1;
width: 8.3vw;
height: calc(100% - 1%);
transition: flex 500ms ease-out;
padding: 20px;
box-shadow: 2px 0px 4px -1px rgba(0, 0, 0, 0.66);
}
li.selected {
flex: 30vw;
}
.projects {
width: 30vw;
height: auto;
margin-bottom: 5vh;
}
/* ------- PARAGRAPH STYLES ------- */
a {
text-decoration: none;
color: black;
}
a:hover {
opacity: 0.5;
}
.maintitle {
width: 100%;
font-size: 30px;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
}
.subtitle {
width: 150vw;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
}
img {
padding-top: 20px;
width: 25vh;
height: auto;
}

  &lt;ul&gt;
&lt;!-- MICRO-1--&gt;
&lt;li&gt;
&lt;div class=&quot;projects &quot;&gt;
&lt;a href=&quot;matilde/matilde.html &quot;&gt;
&lt;div class=&quot;maintitle &quot;&gt; Networked Infrastructures&lt;/div&gt;
&lt;div class=&quot;subtitle &quot;&gt; Three geographies (environmental, economic, political)&lt;/div&gt;
&lt;img src=&quot;gif5.gif &quot;&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;projects &quot;&gt;
&lt;a href=&quot;matilde/matilde.html &quot;&gt;
&lt;div class=&quot;maintitle &quot;&gt; Networked Infrastructures&lt;/div&gt;
&lt;div class=&quot;subtitle &quot;&gt; Three geographies (environmental, economic, political)&lt;/div&gt;
&lt;img src=&quot;gif5.gif &quot;&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;projects &quot;&gt;
&lt;a href=&quot;matilde/matilde.html &quot;&gt;
&lt;div class=&quot;maintitle &quot;&gt; Networked Infrastructures&lt;/div&gt;
&lt;div class=&quot;subtitle &quot;&gt; Three geographies (environmental, economic, political)&lt;/div&gt;
&lt;img src=&quot;gif5.gif &quot;&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;!-- PROJECT 2--&gt;
&lt;li&gt;
&lt;div class=&quot;projects &quot;&gt;
&lt;a href=&quot;matilde/matilde.html &quot;&gt;
&lt;div class=&quot;maintitle &quot;&gt; Networked Infrastructures&lt;/div&gt;
&lt;div class=&quot;subtitle &quot;&gt; Three geographies (environmental, economic, political)&lt;/div&gt;
&lt;img src=&quot;gif5.gif &quot;&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;projects &quot;&gt;
&lt;a href=&quot;matilde/matilde.html &quot;&gt;
&lt;div class=&quot;maintitle &quot;&gt; Networked Infrastructures&lt;/div&gt;
&lt;div class=&quot;subtitle &quot;&gt; Three geographies (environmental, economic, political)&lt;/div&gt;
&lt;img src=&quot;gif5.gif &quot;&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;projects &quot;&gt;
&lt;a href=&quot;matilde/matilde.html &quot;&gt;
&lt;div class=&quot;maintitle &quot;&gt; Networked Infrastructures&lt;/div&gt;
&lt;div class=&quot;subtitle &quot;&gt; Three geographies (environmental, economic, political)&lt;/div&gt;
&lt;img src=&quot;gif5.gif &quot;&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;!-- PROJECT 3 --&gt;
&lt;li&gt;3&lt;/li&gt;
&lt;li&gt;4&lt;/li&gt;
&lt;li&gt;5&lt;/li&gt;
&lt;li&gt;6&lt;/li&gt;
&lt;li&gt;7&lt;/li&gt;
&lt;li&gt;8&lt;/li&gt;
&lt;li&gt;9&lt;/li&gt;
&lt;li&gt;10&lt;/li&gt;
&lt;li&gt;11&lt;/li&gt;
&lt;li&gt;12&lt;/li&gt;
&lt;/ul&gt;

答案2

得分: 0

你的问题有点模糊。如果你必须点击来选择手风琴的一个窗格，其他元素的悬停会发生什么？

这里有一个答案将两者结合起来：悬停优先于点击，但通过点击打开的窗格会在任何悬停之外保持打开状态。

你只需要将以下内容作为选择器放入代码中：

ul#vertical-accordion:not(:hover) li.selected,
li:hover {
...

可选地，你可以添加以下内容来检查当前选定的元素：

ul#vertical-accordion:hover li.selected {
background-color: #f8d0d8;
}

对于JavaScript部分，请不要忽略 classList.toggle() 方法的特点：

它返回一个布尔值
它允许可选地强制分配或不分配类别

完整的代码如下：

document.querySelectorAll('ul#vertical-accordion > li').forEach((li, _, all) => {
li.onclick = _ => {
if (li.classList.toggle('selected')) {
all.forEach(aLi => aLi.classList.toggle('selected', aLi === li));
}
}
});

/* CSS部分在你的代码中 */

<!-- HTML部分在你的代码中 -->

请注意，我只提供了翻译和代码的相关部分。

英文:

your question is vague.
If you have to use a click to select a pane of your accordion, what happens to the hover on the others elements?

Here is an answer that combines the two
the hover has priority over the click, but the pane opened with a click remains open outside of any hovering of the set.

you just have to put as a selector:

ul#vertical-accordion:not(:hover) li.selected,
li:hover {
...

Optionnaly you can add

ul#vertical-accordion:hover li.selected {
background-color: #f8d0d8;
}

to check the current selected element during any over.

For the JS side, do not neglect the particularities of the method .classList.toggle()
1- it returns a boolean value
2- it allows optionally to force or not the assignment of a class

full code:

document.querySelectorAll(&#39;ul#vertical-accordion &gt; li&#39;).forEach( (li,_,all) =&gt;
{
li.onclick =_=&gt;
{
if (li.classList.toggle(&#39;selected&#39;))
{
all.forEach( aLi =&gt; aLi.classList.toggle(&#39;selected&#39;,aLi===li));
}
}  
});

body {
width  : 100vw;
height : 100vh;
margin : 0;
}
ul,
li {
margin     : 0;
padding    : 0;
list-style : none;
}
ul {
display  : flex;
overflow : hidden;
height   : 100vh;
width    : 100vw;
}
li {
overflow-y         : scroll;
overflow           : auto;
-webkit-box-flex   : 1;
-webkit-flex       : 1;
-ms-flex           : 1;
flex               : 1;
width              : 8.3vw;
height             : calc(100% - 1%);
-webkit-transition : -webkit-box-flex 500ms ease-out;
-webkit-transition : -webkit-flex 500ms ease-out;
transition         : -webkit-box-flex 500ms ease-out;
transition         : -ms-flex 500ms ease-out;
transition         : flex 500ms ease-out;
padding            : 20px;
-webkit-box-shadow : 2px 0px 4px -1px rgba(0, 0, 0, 0.66);
-moz-box-shadow    : 2px 0px 4px -1px rgba(0, 0, 0, 0.66);
box-shadow         : 2px 0px 4px -1px rgba(0, 0, 0, 0.66);
}
ul#vertical-accordion:not(:hover) li.selected,
li:hover {
-webkit-box-flex : 30vw;
-webkit-flex     : 30vw;
-ms-flex         : 30vw;
flex             : 30vw;
}
ul#vertical-accordion:hover li.selected {
background-color: #f8d0d8;
}
.projects {
width         : 30vw;
height        : auto;
margin-bottom : 5vh;
}
/* ------- PARAGRAPH STYLES ------- */
a {
text-decoration : none;
color           : black;
}
a:hover {
opacity : 0.5;
}
.maintitle {
width          : 100%;
font-size      : 30px;
text-transform : uppercase;
font-family    : Arial, Helvetica, sans-serif;
}
.subtitle {
width       : 150vw;
font-size   : 20px;
font-family : Arial, Helvetica, sans-serif;
}
/* ---removed for this sample  
img {
padding-top : 20px;
width       : 25vh;
height      : auto;
}
*/

&lt;ul id=&quot;vertical-accordion&quot;&gt;
&lt;!-- MICRO-1--&gt;
&lt;li&gt;
&lt;div class=&quot;projects &quot;&gt;
&lt;a href=&quot;matilde/matilde.html &quot;&gt;
&lt;div class=&quot;maintitle &quot;&gt; Networked Infrastructures&lt;/div&gt;
&lt;div class=&quot;subtitle &quot;&gt; Three geographies (environmental, economic, political)&lt;/div&gt;
&lt;!-- img src=&quot;gif5.gif &quot; --&gt;
&lt;img src=&quot;https://picsum.photos/200/100?random=1&quot;&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;projects &quot;&gt;
&lt;a href=&quot;matilde/matilde.html &quot;&gt;
&lt;div class=&quot;maintitle &quot;&gt; Networked Infrastructures&lt;/div&gt;
&lt;div class=&quot;subtitle &quot;&gt; Three geographies (environmental, economic, political)&lt;/div&gt;
&lt;!-- img src=&quot;gif5.gif &quot; --&gt;
&lt;img src=&quot;https://picsum.photos/200/100?random=2&quot;&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;projects &quot;&gt;
&lt;a href=&quot;matilde/matilde.html &quot;&gt;
&lt;div class=&quot;maintitle &quot;&gt; Networked Infrastructures&lt;/div&gt;
&lt;div class=&quot;subtitle &quot;&gt; Three geographies (environmental, economic, political)&lt;/div&gt;
&lt;!-- img src=&quot;gif5.gif &quot; --&gt;
&lt;img src=&quot;https://picsum.photos/200/100?random=3&quot;&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;!-- PROJECT 2--&gt;
&lt;li&gt;
&lt;div class=&quot;projects &quot;&gt;
&lt;a href=&quot;matilde/matilde.html &quot;&gt;
&lt;div class=&quot;maintitle &quot;&gt; Networked Infrastructures&lt;/div&gt;
&lt;div class=&quot;subtitle &quot;&gt; Three geographies (environmental, economic, political)&lt;/div&gt;
&lt;!-- img src=&quot;gif5.gif &quot; --&gt;
&lt;img src=&quot;https://picsum.photos/200/100?random=4&quot;&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;projects &quot;&gt;
&lt;a href=&quot;matilde/matilde.html &quot;&gt;
&lt;div class=&quot;maintitle &quot;&gt; Networked Infrastructures&lt;/div&gt;
&lt;div class=&quot;subtitle &quot;&gt; Three geographies (environmental, economic, political)&lt;/div&gt;
&lt;!-- img src=&quot;gif5.gif &quot; --&gt;
&lt;img src=&quot;https://picsum.photos/200/100?random=5&quot;&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;projects &quot;&gt;
&lt;a href=&quot;matilde/matilde.html &quot;&gt;
&lt;div class=&quot;maintitle &quot;&gt; Networked Infrastructures&lt;/div&gt;
&lt;div class=&quot;subtitle &quot;&gt; Three geographies (environmental, economic, political)&lt;/div&gt;
&lt;!-- img src=&quot;gif5.gif &quot; --&gt;
&lt;img src=&quot;https://picsum.photos/200/100?random=6&quot;&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;!-- PROJECT 3 --&gt;
&lt;li&gt;3&lt;/li&gt;
&lt;li&gt;4&lt;/li&gt;
&lt;li&gt;5&lt;/li&gt;
&lt;li&gt;6&lt;/li&gt;
&lt;li&gt;7&lt;/li&gt;
&lt;li&gt;8&lt;/li&gt;
&lt;li&gt;9&lt;/li&gt;
&lt;li&gt;10&lt;/li&gt;
&lt;li&gt;11&lt;/li&gt;
&lt;li&gt;12&lt;/li&gt;
&lt;/ul&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

如何制作可点击的垂直手风琴？

问题

答案1

答案2

为什么如果我决定再次运行addStar()函数，它不起作用？

从 Pandas 数据框中访问 HTML 表格行元素

Puzzle using CSS and Javascript

为什么我的HTML类属性被折叠成三个点呢？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论