질문

모바일에서 축소되는 bottom 글을 만들려면 어떻게해야합니까? 실제로 확장하려면 메뉴 제목을 클릭해야합니까?

bottom 글 메뉴가 데스크탑에서 정상적으로 보이기를 원합니다.

2. 모바일의 경우 기본적으로 자동으로 축소되고 사용자가 메뉴를 확장하거나 닫을 수있는 옵션이 있습니다.

감사합니다 !

내 현재 코드 :

    <div class="three columns" >
 <h2 > Legal </h2> 
<ul>
 <li> <a href="#">Shipping</a></li>
 <li> <a href="#" >Contact Us</a></li>
 <li> <a href="#">About</a></li>
 <li> <a href="#">Returns</a></li>
  </ul>
</div>
      
      
<div class="three columns" >
 <h2> Information </h2> 
<ul>
 <li> <a href="#">Privacy</a></li>
 <li> <a href="#" >Terms</a></li>
 <li> <a href="#">Ambassadors</a></li>
 <li> <a href="#">Blog</a></li>
  </ul>
</div>

Expand snippet

답변1

도움이 되었기를 바랍니다.

  jQuery(".nav-footer h4").click(function(){
      jQuery(this).parent(".nav").toggleClass("open"); 
  });

.nav-footer-item ul {
list-style: none;
  padding-left: 3px;
}

.open h4 {
  opacity: 0.3;
}

h4 {
  font-size: 30px;
}
.nav-footer-item {
  padding: 25px !important;
}

@media (max-width : 768px) {
    
.nav-footer .nav h4 { 
  cursor: pointer; 
  }
.nav-footer ul { 
  max-height: 0; 
  overflow:hidden; 
  transition: max-height 1s ease-out; }

  .nav-footer .nav h4:after { 
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='svg-icon' viewBox='0 0 20 20'%3E%3Cpath d='M14.613,10c0,0.23-0.188,0.419-0.419,0.419H10.42v3.774c0,0.23-0.189,0.42-0.42,0.42s-0.419-0.189-0.419-0.42v-3.774H5.806c-0.23,0-0.419-0.189-0.419-0.419s0.189-0.419,0.419-0.419h3.775V5.806c0-0.23,0.189-0.419,0.419-0.419s0.42,0.189,0.42,0.419v3.775h3.774C14.425,9.581,14.613,9.77,14.613,10 M17.969,10c0,4.401-3.567,7.969-7.969,7.969c-4.402,0-7.969-3.567-7.969-7.969c0-4.402,3.567-7.969,7.969-7.969C14.401,2.031,17.969,5.598,17.969,10 M17.13,10c0-3.932-3.198-7.13-7.13-7.13S2.87,6.068,2.87,10c0,3.933,3.198,7.13,7.13,7.13S17.13,13.933,17.13,10'%3E%3C/path%3E%3C/svg%3E");
    width: 25px;
    float: right; 
  }
.nav-footer .nav.open h4:after { 
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='svg-icon' viewBox='0 0 20 20'%3E%3Cpath d='M10.185,1.417c-4.741,0-8.583,3.842-8.583,8.583c0,4.74,3.842,8.582,8.583,8.582S18.768,14.74,18.768,10C18.768,5.259,14.926,1.417,10.185,1.417 M10.185,17.68c-4.235,0-7.679-3.445-7.679-7.68c0-4.235,3.444-7.679,7.679-7.679S17.864,5.765,17.864,10C17.864,14.234,14.42,17.68,10.185,17.68 M10.824,10l2.842-2.844c0.178-0.176,0.178-0.46,0-0.637c-0.177-0.178-0.461-0.178-0.637,0l-2.844,2.841L7.341,6.52c-0.176-0.178-0.46-0.178-0.637,0c-0.178,0.176-0.178,0.461,0,0.637L9.546,10l-2.841,2.844c-0.178,0.176-0.178,0.461,0,0.637c0.178,0.178,0.459,0.178,0.637,0l2.844-2.841l2.844,2.841c0.178,0.178,0.459,0.178,0.637,0c0.178-0.176,0.178-0.461,0-0.637L10.824,10z'%3E%3C/path%3E%3C/svg%3E");
   width: 25px;
  }

  .nav-footer .nav.open ul { 
  height:auto; 
  max-height: 500px; 
  transition: max-height 1s ease-in !important; }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<footer class="nav-footer">
  <div class="nav-footer-item nav col-sm-3">
    <h4>Title</h4>
    <ul>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
    </ul>
  </div>
    <div class="nav-footer-item nav col-sm-3">
    <h4>Title</h4>
    <ul>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
    </ul>
  </div>
    <div class="nav-footer-item nav col-sm-3">
    <h4>Title</h4>
    <ul>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
    </ul>
  </div>
  <div class="nav-footer-item nav col-sm-3">
    <h4>Title</h4>
    <ul>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
    </ul>
  </div>
</footer>