Нижний колонтитул Collapsibe в адаптивном

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

Вот мой код Javascript:

   $(document).ready(function(){

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

Плункер: Plunker

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

javascript jquery angularjs

19.11.2018 11:44

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

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

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>

как отображать элементы списка, открытые на рабочем столе ... Не могли бы вы помочь мне в этом

— 19.11.2018 12:14

С помощью моего предыдущего кода вы можете удалить на элементах taber свернутый класс collapse[i].classList.remove('collapsed') и добавить класс свертывания панели элементов в panelcollapse[i].classList.add('in');

— 19.11.2018 12:17

Нет, мое требование - элементы списка всегда должны быть открыты на рабочем столе.

— 19.11.2018 12:26

19.11.2018 12:10