Коллапсиб нижний колонтитул в отзывчивом - PullRequest
Новая
       2

Коллапсиб нижний колонтитул в отзывчивом

0 голосов
/ 19 ноября 2018

У меня есть сценарий, где нижний колонтитул должен быть свернут в меньшем устройстве. Я сделал это с помощью jquery, но мне нужно сделать это с помощью простого javascript или angularjs.Need, чтобы отобразить все элементы списка в представлении рабочего стола.

Вот мой код Javascript: 

   $(document).ready(function(){

$("[data-toggle='collapse']").removeAttr("data-toggle");  
  if($(window).width()<768)
  {
   $(".taber").attr("data-toggle","collapse");  
 $('.collapse').collapse("hide");
  }
});

Плункер: Плункер

Любая помощь будет оценена.

1 Ответ

0 голосов
/ 19 ноября 2018

Вы можете добавить к свернутым элементам класс, свернутый в класс, и удалить из панели свернуть класс в 

const collapseOnResponsive = () => {
  // get bodt size
  var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;
    
  // if width less than 768 collapse all items
  if(x < 768) {
    //get all title items of collapse
    const collapse = document.getElementsByClassName('taber');
    const collapseLength = collapse.length;
    for(let i = 0; i < collapseLength; i++){
      // adds class collapsed
      collapse[i].classList.add('collapsed');
    }
    
    //get all panel to collapse
    const panelcollapse = document.getElementsByClassName('panel-collapse collapse');
    const panelcollapseLength = panelcollapse.length;
    for(let i = 0; i < panelcollapseLength; i++){
      // remove class in
      panelcollapse[i].classList.remove('in');
    }
  }
}

collapseOnResponsive();
/* Styles go here */
footer
{
  background:#000;
  padding:4% 0;
}

footer ul li,.taber

{
 color:#fff;
  list-style:none;
  margin-bottom:10px;
  font-size:16px
}
@media (max-width:723px)
{
.taber
{
border-bottom:1px solid #ccc;
padding-bottom:10px;
cursor:auto;
}
.taber.collapsed:after {
    content: "+";
    float: right;
    font-size: 22px;
    margin-right: 10px;
}
.taber:after {
    content: "-";
    float: right;
    font-size: 22px;
    margin-right: 10px;
}
.taber {
    border-bottom: 1px solid #ccc;
cursor: pointer;    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
}
.panel-collapse{
padding-left: 15px;
    padding-right: 15px;
}
footer >.container
{
padding-left: 0;
    padding-right: 0px;
}
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</head>
<body>
    <footer>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-sm-4">
            
                    <div data-toggle="collapse" class="taber" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                    View Location
                    </div>
                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                   <ul>
                   <li>Home</li>
                    <li>Home</li>
                     <li>Home</li>
                      <li>Home</li>
                       <li>Home</li>
                   
                   </ul>
                </div>
            </div>
            <div class="col-md-4 col-sm-4">
                
                    <div  class="taber" data-toggle="collapse" data-parent="#accordion" href="#collapsetwo" aria-expanded="false" aria-controls="collapseOne">
                    View Location
                    </div>
                
                <div id="collapsetwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                     <ul>
                   <li>Home</li>
                    <li>Home</li>
                     <li>Home</li>
                      <li>Home</li>
                       <li>Home</li>
                   
                   </ul>
                </div>
            </div>
            <div class="col-md-4 col-sm-4">
                
                    <div  class="taber" data-toggle="collapse" data-parent="#accordion" href="#collapsethree" aria-expanded="false" aria-controls="collapseOne">
                    View Location
                    </div>
                <div id="collapsethree" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                     <ul>
                   <li>Home</li>
                    <li>Home</li>
                     <li>Home</li>
                      <li>Home</li>
                       <li>Home</li>
                   
                   </ul>
                </div>
            </div>
        </div>
    </div>
</footer>
<script src="script.js"></script>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...