Ячейки таблицы HTML - и divs - отключение функций переключения jPlist - PullRequest
Новая
       16

Ячейки таблицы HTML - и divs - отключение функций переключения jPlist

0 голосов
/ 07 марта 2019

У меня есть функция переключения jPlist, которая работает для серии разделений на странице - то есть, когда пользователь выбирает дополнительные категории, количество вариантов уменьшается только до тех элементов, которые включают каждую выбранную категорию.Но когда я помещаю эти деления в таблицу из двух ячеек (две колонки), внезапно функции jplist работают только для делений в первой ячейке.

Вызов в jplist выглядит так - 

<link href="css/jplist-core.min.css" rel="stylesheet" type="text/css" />        
<link href="css/jplist-filter-toggle-bundle.min.css" rel="stylesheet" type="text/css" />
<script>
$('document').ready(function(){

    $('#demo').jplist({             
        itemsBox: '.list' 
        ,itemPath: '.list-item' 
        ,panelPath: '.jplist-panel' 
    });
});
</script>

Кнопки категорий выглядят так - 

<div id="demo" class="box jplist" style="margin: 0px 0 50px 0">
    <!-- Begin Filter Buttons -->

    <div class="jplist-panel box panel-top">
    <p>Choose one or more to find the right space for you:</p>
        <button
            type="button"                                   
            data-control-type="button-filter"
            data-control-action="filter"
            data-control-name="quiet-btn" 
            data-path=".quiet" 
            >
                <i class="fa fa-home"></i>
                Quiet
        </button>

И сами дивы выглядят так: 

    <div class="list box text-shadow">
        <!-- item 16 -->
        <div class="list-item box">                 
            <!-- img -->
            <div class="img left">
                <img src="/img/Group-Study-Rooms.jpg" alt="Table and whiteboard in a Study Room" title="Group Study Rooms"/>
            </div>

            <!-- data -->
            <div class="block right">
                <p class="title">Group Study Rooms</p>
                <p class="desc">These 16 rooms are available to any faculty, students, or staff.  You can reserve one ahead up to five days in advance.  Reservations are limited to 3 hours per person or group each day.  <a href="http://{my institution}.libcal.com/spaces?lid=662">Book yours today!</a>
                <p class="theme">
                    <span class="group">Group Study</span>, <span class="conversation">Conversation Allowed</span>, <span class="whiteboards">Whiteboards</span>, <span class="computers">Computers</span>, <span class="reserve">Reservable</span>
                </p>
            </div>
        </div>

Есть идеи?Спасибо всем.

PS Не знаю, имеет ли это значение, но кнопки и элементы div находятся на странице, которая загружается в виде PHP-включения на страницу с основным вызовом jPlist.

PPS та же проблема возникает, когда я помещаю эти div в div для списка аккордеонов, построенного из jQuery;только первый div работает правильно с переключателями jPlist.

...