html 如何做一个可点击的垂直 accordion ？

9q78igpj  于 2023-05-12  发布在  其他
关注(0)|答案(2)|浏览(110)

我正在为我的硕士课程做一个网站，我想做一个垂直的可点击的 accordion 机制。这个想法是点击每一个部分，它扩大了更多的信息。到目前为止，我只是使用CSS的悬停机制。我如何使它可点击并使用JS？如果有人能帮助我，我会非常感激。

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;
  }
<!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>

到目前为止，我只是使用CSS的悬停机制。我如何使它可点击并使用JS？我也可以让每一个无限自动滚动？如果有人能帮助我，我会非常感激。

Html

2条答案

按热度按时间
q35jwt9p

q35jwt9p1#

我觉得这应该行得通。基本上我刚刚用li.selected替换了你的li:hover选择器。现在，当您单击<li>标记时，它只使用一些简单的JS来添加/删除selected类。
注意：我更正了上面评论者提到的一些语法错误。我还删除了所有这些-webkit-，-moz-和-ms-前缀项，因为它们基本上不再需要。

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

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

function unselectAll(){
  for (let i = 0; i < 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;
}

/* ------- 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;
}
<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 ">
            </a>
        </div>

        <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 ">
            </a>
        </div>

        <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 ">
            </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 ">
            </a>
        </div>

        <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 ">
            </a>
        </div>

        <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 ">
            </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>
赞(0）分享  回复(0）举报  2023-05-12
vd8tlhqk

vd8tlhqk2#

你的问题很含糊。如果您必须使用单击来选择 accordion 的一个窗格，那么悬停在其他元素上会发生什么？
这里有一个结合了两者的答案：悬停优先于单击，但单击打开的窗格在集合的任何悬停之外保持打开状态。
你只需要把它作为一个选择器：

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

您可以选择添加

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

在任何over期间检查当前选定的元素。
对于JS端，不要忽略方法.classList.toggle()的特殊性
1-它返回一个布尔值
2-它允许有选择地强制或不强制类的赋值
完整代码：

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));
      }
    }  
  });
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;
  }
*/
<ul id="vertical-accordion">
  <!-- 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 " -->
        <img src="https://picsum.photos/200/100?random=1">
      </a>
    </div>

    <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 " -->
        <img src="https://picsum.photos/200/100?random=2">
      </a>
    </div>

    <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 " -->
        <img src="https://picsum.photos/200/100?random=3">
      </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 " -->
        <img src="https://picsum.photos/200/100?random=4">
      </a>
    </div>
    <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 " -->
        <img src="https://picsum.photos/200/100?random=5">
      </a>
    </div>
    <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 " -->
        <img src="https://picsum.photos/200/100?random=6">
      </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>
赞(0）分享  回复(0）举报  2023-05-12
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com