Я пытаюсь сделать так, чтобы при нажатии .toggle-day цель данных включала или выключала класс, чтобы показать поле.

jQuery(document).ready(function(){
  var windowWidth = jQuery(window).width();
  if(windowWidth <= 768) //for iPad & smaller devices
     jQuery('.panel-collapse').removeClass('in'); // start everything collapsed on mobile

     jQuery('.toggle-day').click(function(){
       // get this data-target
        var target = $(this).data("target");
        target.toggleClass('in');
        });
});
.col .collapse.in {
    display: block;
}

.col .collapse {
    display: none;
}
<div class="col">
    <div class="day-header">
        <h4><a class="toggle-day" data-target="#w1d2">Saturday July 25</a></h4>
    </div>
    <div id="w1d2" class="panel-collapse collapse in">
        <p>
        Show me
        </p>
    </div>  
</div> 

Любые идеи? Спасибо.

Вот скрипка: https://jsfiddle.net/agileapricot/t9ecuysb/13/

1
snowliondev 18 Июн 2020 в 18:18

1 ответ

Лучший ответ

У тебя это почти получилось. Просто измените:

target.toggleClass('in');

Чтобы :

$(target).toggleClass('in');

Поскольку target - это строка с идентификатором элемента для переключения его класса, и вместо этого вы можете использовать jquery для получения элемента.

jQuery(document).ready(function(){
  var windowWidth = jQuery(window).width();
  if(windowWidth <= 768) //for iPad & smaller devices
     jQuery('.panel-collapse').removeClass('in');
     
     jQuery('.toggle-day').click(function(){
       // get this data-target
        var target = $(this).data("target");
        $(target).toggleClass('in');
     });
});
.toggle-day {
    cursor: pointer;
}

.col .collapse.in {
    display: block;
}

.col .collapse {
    display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
        <div class="day-header">
            <h4><a class="toggle-day" data-target="#w1d2">Saturday July 25</a></h4>
        </div>
        <div id="w1d2" class="panel-collapse collapse in">
            <p>
            Show me
            </p>
        </div>  
    </div> 
    
        <div class="col">
        <div class="day-header">
            <h4><a class="toggle-day" data-target="#w1d3">Sunday July 26</a></h4>
        </div>
        <div id="w1d3" class="panel-collapse collapse in">
            <p>
            Show me
            </p>
        </div>  
    </div>
0
jeprubio 18 Июн 2020 в 15:25