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

问题描述 投票：0回答：2

我正在为我的硕士课程制作一个网站，我想制作一个垂直可点击的手风琴机制。 ideia 是单击每个部分，它会扩展更多信息。 到目前为止，我只是使用 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？我还可以让每一个都无限自动滚动吗？如果有人能帮助我，我将不胜感激。

javascript html click accordion
2个回答
1
投票

我认为这应该有效。基本上，我刚刚用 

li:hover
替换了您的 
li.selected
选择器。现在它只使用一些简单的 JS 在您单击 
selected
标签时添加/删除 
<li>
类。

注意：我纠正了上面评论者提到的很多语法错误。我还删除了所有那些 

-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
投票

你的问题含糊不清。 如果您必须使用单击来选择手风琴的一个窗格，那么悬停在其他元素上会发生什么情况？

这是一个结合了两者的答案 悬停优先于单击，但通过单击打开的窗格在集的任何悬停之外保持打开状态。

你只需要把它作为选择器：

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

Optionnaly你可以添加

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

在任何结束时检查当前选择的元素。

对于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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.